node.js - 使用动态导入时组件为 'undefined'

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 bundle 中，因为当延迟加载的模块需要时，捆绑程序会删除这些文件。

'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",
  ],

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