1

我正在尝试使用react-loadable来实现代码拆分，并且按照文档中的建议，我为它创建了一个 HOC，如下所示：

export default function({ componentPath }) {
  return Loadable({
    loader: async () => {      
      const component = await import(componentPath)
      return component;
    },  
    delay: 200
  });
}

我像这样使用它

import withLoadable from "hoc/withLoadable";

....

const Home = withLoadable({componentPath: "containers/Home"});

但我收到以下错误

Error: Cannot find module 'containers/Home'
    at eval (eval at ./src/hoc lazy recursive (main.chunk.js:formatted:98), <anonymous>:5:11)

参考这里的文档，他们提到了这个问题以及如何解决它，我尝试添加modules, 和webpack属性，但它没有用。

顺便说一句：在 webpack.config.js 中，我已将“src”目录添加到解析模块中，如下所示：

...
resolve: {
      // This allows you to set a fallback for where Webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: ['src','node_modules'].concat(
        // It is guaranteed to exist because we tweak it in `env.js`
        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
      ),
...

我确定我错过了什么，但我可以得到它......

4

0 回答 0