Question

我在webpack / react应用程序中使用动态导入时遇到问题。这是我的代码：

loader: (router) => import('../components/pages/home').then(component => {

  console.log(component)
  debugger;
  return router(component.default)
}

由于某种原因，模块似乎正确导入，因为它满足导入功能条件 - 即

typeof module === "object" && module && module.__esModule

但是组件仍然未定义。返回值为：

{HomePage: undefined, __esModule: true}

奇怪的是，如果我在文件顶部添加相同组件的静态导入，那么导入按预期工作 - 显然这不是我想要的：D

非常感谢任何帮助。

提前致谢！

Answer 1

因此，为了解决我的问题，我必须用动态导入替换所有“require.ensure”函数。

我还必须明确地将一些css文件添加到我的webpack供应商包中，因为在延迟加载的模块需要时它们被捆绑器删除。

'vendor': [
   './src/less/vendor.less',

   // HACK - Explicitly adding these files to the vendor.
   // They are incorrectly removed from the bundle when required by 
   // style imports in async modules
   // https://github.com/webpack-contrib/extract-text-webpack- 
   // plugin/issues/456#issuecomment-340287722

   "style-loader/addStyles",
   "css-loader/lib/css-base",
  ],

我不确定这对你来说是否适用于TBH但运气好

组件未定义＆＃39;使用动态导入时

1 个答案: