Javascript 处理动态导入（如React.lazy或崩溃）时返回空对象的网页包，具体取决于网页包配置

编辑：

我几乎重写了整个应用程序，但没有用，以下是整个回购协议：

仍然收到相同的dispose错误：

Uncaught TypeError: Cannot read property 'dispose' of undefined

还有这个：

Unhandled Rejection (Error)
Loading chunk 0 failed.

尽管事实是在本地运行的，但每当我尝试使用从NPM下载的模块时，它都会在试图查找块时崩溃

---

几天前，我在尝试创建使用React.lazy的NPM包组件时遇到了Webpack方面的问题，但我一直无法找到解决方案

我正在使用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

以下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')
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'
  }
}

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
  }
}