reactjs - 如何解决 webpack/reactjs 应用程序中找不到模块的错误？

Question

我创建了一个reactjs/webpack应用程序，其中包含在main.js中创建的组件:

import React from 'react';
import cube  from 'my-module';

class MainLayout extends React.Component {

    constructor(props) {
        super(props);
        console.log('testing=main constructor')

        console.log(cube(3));

    }


    render() {
        console.log('main render' )
        return (
            <div>hello</div>
        );
    }
}

export default MainLayout

我试图了解 es6 中的导入和导出，并在同一目录中创建一个模块:

// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

但是我收到此错误:

ERROR in ./app/components/layouts/main/main.js
Module not found: Error: Cannot resolve module 'my-module' in ...

如何解决此错误？

Answer 1

如果您在模块名称之前没有指定路径(以 ./ 开头)，webpack(使用常规 Nodejs 模块解析)将查找 my-module 在最近的 node_modules 文件夹中。

因此，如果包含 MainLayout 类的文件与 my-module.js 位于同一文件夹中，那么您的导入语句将如下所示:

import cube from './my-module'

如果它比上面一层高，它看起来像:

import cube from '../my-module'

然后是上面的一个:

import cube from '../../my-module'

等等。

可以使用别名配置 webpack 或让它了解充当顶级模块的特定文件。我发现非常有用的另一种技术是构建您的应用程序，如下所示:

node_modules/
src/
  node_modules/
    app.js
    my-module.js

webpack.config.js

这样您就可以随时查找自己的任何模块，而无需指定路径，因为节点将首先在您的 src/node_modules 文件夹中查找，然后如果在那里找不到它，则会查找在所有 npm 包所在的顶级 node_modules 文件夹中。如果您这样做，请确保不要将 src/node_modules 放入 .gitignore!