Question

我正在尝试使用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)

参考文档here，他们提到了这个问题以及解决方法，我尝试添加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)
      ),
...

我确定我想念一些东西，但是我可以得到...

可加载的高阶组件

0 个答案: