Webpack 在处理动态导入（例如 React.lazy）时返回空对象或根据 webpack 配置崩溃

Question

编辑：

我重写了几乎整个应用程序但无济于事，这是整个存储库： https: //github.com/rmolinamir/react-png-component

仍然遇到相同的处理错误：

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

惰性组件很简单：

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

如果您有任何解决此问题的想法或需要任何进一步的信息，请告诉我。

谢谢你！