使用动态导入时组件“未定义”答案

【问题标题】：Component is 'undefined' when using dynamic import使用动态导入时组件“未定义”
【发布时间】：2018-03-13 14:44:23
【问题描述】：

我在 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

任何帮助将不胜感激。

提前致谢！

【问题讨论】：

我也遇到了同样的问题，你找到解决办法了吗？
实际上我确实为我的情况找到了解决方案。我将在下面发布答案。

标签： node.js webpack dynamic-import

【解决方案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",
  ],

我不确定这是否对你有用，但祝你好运

【讨论】：