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

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

谢谢！

Webpack在处理动态导入（例如React.lazy）或崩溃时返回空对象，具体取决于Webpack配置

0 个答案: