React调试错误‘Module not found: Can‘t resolve‘

Posted 2020-11-07

问题

React应用调试时发现一个感觉不起眼的错误，记录于此。

我现在使用React+Semantic-UI-React调试程序，想写一个最简单的三子连线的小游戏作为试验。于是，创建一个Board组件，又创建了一个Square组件，后者将纳入前者的管理，于是有类似于下面的代码：

//...
import Square from ‘Square‘
class Board extends Component{
    //...
    render(){
        return(
            <Square value={‘X‘}/>
            )
        }
        //...

注意，组件Square和Board位于同一路径下。相信有像我这样的React JSX编程的初学者也感觉上面代码，特别是最开始时的导入语句没有问题，但恰恰就有问题——是有关于路径的问题！

正确答案

上面的正确引用写法应当是：

import Square form ‘./Square‘

如果使用上面第一种写法，在编译运行时即出现如题所示的错误！！！

有感

有时有些问题感觉简单得不值得一记，考虑再三觉得记录一下更好，尽管网络上有关如标题所示的疑问很多，但大多是「高大上」的那种，像本文记录得倒见之极少，这也是写此笔记的原因。