Веб-пакет возвращает пустой объект при обработке динамического импорта, такого как React.lazy или сбой в зависимости от конфигурации веб-пакета

Question

РЕДАКТИРОВАТЬ:

Я переписал почти все приложение безрезультатно, вот весь репозиторий: https://github.com/rmolinamir/react-png-component

Все еще получая ту же ошибку утилизации:

Uncaught TypeError: Cannot read property 'dispose' of undefined

А вот это:

Unhandled Rejection (Error)
Loading chunk 0 failed.

Факт работает, хотя локально, но всякий раз, когда я пытаюсь использовать модуль, загруженный из NPM, он вылетает, пытаясь найти куски.

---

У меня возникли проблемы с Webpack при попытке создать компонент пакета NPM, использующий React.lazy, пару дней назад, но я не смог найти решение.

Я использую React@16.8.2 и webpack@4.29.4 для создания ленивого компонента и публикации его в NPM.

Версии

"react": "^16.8.2",
"react-dom": "^16.8.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/core": "^7.3.3",
"webpack": "^4.29.4",

Допустим, у меня есть этот компонент:

import React, { Component, lazy, Suspense } from 'react'
const LazyComponent = lazy(() => import(/* webpackPrefetch: true */ './Lazy'))

class App extends Component {
  render () {
    return (
      <div>
        <Suspense fallback={<h1>LOADING</h1>}>
          <LazyComponent />
        </Suspense>
        <h1>My component</h1>
      </div>
    )
  }
}

export default App

Ленивый компонент просто:

import React from 'react'

const lazyComponent = (props) => {
  return (
    <div>
      <div>
        Lazy Component
      </div>
    </div>
  )
}

export default lazyComponent

Это мой .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
  ]
}

Следующие файлы webpack.config.js приводят к экспорту пустого объекта:

const path = require('path')
require('es6-promise').polyfill()

module.exports = {
  mode: 'production',
  entry: [
    'core-js/modules/es6.promise',
    'core-js/modules/es6.array.iterator',
    path.resolve(__dirname, 'src')
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].index.js',
    chunkFilename: '[name].chunk.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      react: require.resolve('react')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/transform-runtime', @babel/plugin-syntax-dynamic-import]
          }
        }
      },
  externals: {
    'react': 'commonjs react'
  }
}

И следующий файл webpack.config.js(разница заключается в простом добавлении оптимизации) файл приводит к следующей ошибке при экспорте в пакет :

Uncaught TypeError: Cannot read property 'dispose' of undefined
    at eval (VM5762 webpackHotDevClient.js:45)
    at Object../node_modules/react-dev-utils/webpackHotDevClient.js (1.chunk.js:527)
    at i (main.index.js:38)
    at Object.0 (main.chunk.js:89)
    at i (main.index.js:38)
    at Object.eval (main.index.js:497)
    at i (main.index.js:38)
    at Object.eval (main.index.js:488)
    at i (main.index.js:38)
    at eval (main.index.js:120)
    at eval (main.index.js:121)
    at Object.../build/main.index.js (main.chunk.js:10)
    at __webpack_require__ (bundle.js:782)
    at fn (bundle.js:150)
    at eval (App.js:11)
    at Module../src/App.js (main.chunk.js:55)
    at __webpack_require__ (bundle.js:782)
    at fn (bundle.js:150)
    at eval (index.js:8)
    at Module../src/index.js (main.chunk.js:78)
    at __webpack_require__ (bundle.js:782)
    at fn (bundle.js:150)
    at Object.0 (main.chunk.js:90)
    at __webpack_require__ (bundle.js:782)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback (bundle.js:33)
    at main.chunk.js:1

Uncaught Error: Iframe has not been created yet.
    at me (VM5854 index.js:2087)
    at Object.window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__.iframeReady (VM5854 index.js:2097)
    at Module.<anonymous> (<anonymous>:1:279666)
    at n (<anonymous>:1:110)
    at <anonymous>:1:904
    at <anonymous>:1:915
    at HTMLIFrameElement.e.onload (VM5854 index.js:2079)
    at he (VM5854 index.js:2081)
    at eval (VM5854 index.js:2045)
    at eval (VM5854 index.js:1915)

и конфигурации файла:

const path = require('path')
const autoprefixer = require('autoprefixer')
require('es6-promise').polyfill()

module.exports = {
  mode: 'production',
  // entry: './src/index.js',
  entry: [
    'core-js/modules/es6.promise',
    'core-js/modules/es6.array.iterator',
    path.resolve(__dirname, 'src')
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    // filename: 'index.js',
    filename: '[name].index.js',
    chunkFilename: '[name].chunk.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      react: require.resolve('react')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/transform-runtime', @babel/plugin-syntax-dynamic-import]
          }
        }
      },
  externals: {
    'react': 'commonjs react'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false
    },
    runtimeChunk: true
  }
}

ЕслиУ вас есть идея, чтобы решить эту проблему, или, если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Спасибо!