如何在webpack/reactjs应用程序中解决模块未找到错误？

我创建了一个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 (
            
hello
        );
    }
}

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 ...

我该如何解决这个错误？

如果未./在模块名称之前指定路径(以...开头),则webpack(使用常规nodejs模块分辨率)将my-module在最近的node_modules文件夹中查找.

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

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文件夹,然后如果它在那里找不到它,将查看你的node_modules所有npm包所在的顶级文件夹.如果你这样做,虽然,确保不把src/node_modules在.gitignore!