Компонент не определен при использовании динамического импорта

Question

У меня проблема с использованием динамического импорта в приложении webpack / реагировать. Вот мой код:

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-файлы в свой пакет поставщика веб-пакетов, так как они удалялись этим пакетом, когда этого требовали модули с отложенной загрузкой.

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

Я не уверен, будет ли это работать для вас, ТБХ, но удачи