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

问题

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'

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

有感

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

猜你喜欢

转载自blog.51cto.com/zhuxianzhong/2118385