javascript - 未捕获的类型错误 : Cannot read property 'call' of undefined at __webpack_require__

Question

我正在使用 React.lazy 在运行时加载一些 React 类，这样它们就不会一次全部加载。我的代码适用于生产，但在我处于开发模式时崩溃。 (更新:我的代码不再适用于生产 - 见下文)。

特定的错误消息非常含糊，因此很难确切地知道问题是什么:

Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)

The above error occurred in one of your React components:
    in Unknown
    in Suspense
    in div (created by Main)
    in Main (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)

第 64 行给出了以下代码:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

我还有其他没有任何问题的 React 类。

我创建的特定类文件称为 Categories.js。据我所知，我加载的类与任何正在工作的类没有任何不同。我什至尝试过重命名类/文件，并且还删除了其中的大部分数据，以防文件中的某些内容导致问题。

以下是我的代码中的相关行:

import React, {Suspense} from 'react';
....
const Categories = React.lazy(()=> import('./Categories'))
....
return (
    <Suspense fallback={<div>Loading...</div>}>
        <Categories class_select={class_select} />
    </Suspense>
 )

如果有帮助，这是我的 webpack.config.js 文件:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {

  const isProduction = (argv.mode === "production")
  return {

          module: {
            rules: [
              {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: "babel-loader",
                  options: {
                    plugins: [
                        "@babel/plugin-syntax-dynamic-import"
                    ]
                  }
                }
              },
              {
                test: /\.html$/,
                use: [
                  {
                    loader: "html-loader"
                  }
                ]
              }
            ]
          },
          ...(isProduction && {
                  optimization: {
                   // minimize: true,
                    minimizer: [
                        new TerserPlugin({
                                terserOptions: {
                                        extractComments: 'all',
                                        compress: {
                                                drop_console: true
                                        },

                                }
                        })
                    ],
                  }
          }),
          devtool: !isProduction && 'eval-source-map',
          plugins: [
            new HtmlWebPackPlugin({
              template: "./src/index.html",
              filename: "./index.html"
            }),
            new CopyPlugin([
              { from: 'src/css', to: 'css' }
            ])
          ]
     };
};

问题

1) 是什么导致了这个错误？2)为什么只有dev模式导致，而production模式没有？

更新

我的代码也不再适用于生产环境。我收到以下错误:

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at o (main.js:2). 

事实上它在生产中甚至比开发更糟糕。在生产中，没有任何 React 惰性类在工作。在开发中，只有其中一个不起作用。

Answer 1

过程

为了找到这个问题的潜在解决方案，我不得不修改优化模块，这确实是这里的问题，即使没有令人惊讶地启用。我最好的猜测是一些参数在 production 模式下设置为默认值，而不是在 dev 模式下，这会导致导入和未定义属性的问题。

我决定尝试复制部署环境并检查我是否至少可以“破坏”开发，并从这里调查问题。这些是生产和开发之间不同的参数，怀疑是导致手头问题的原因(您可以尝试通过切换到相反的值来将您的 deployment 设置为 development 环境为例)。

关于link我在评论中提供，用户解释说问题出在部署级别，vendors block 的构建方式与 main block 发生冲突并切断了entry 彼此。解决方案之一显然是使用 concatenateModules: false，但无济于事，它没有解决我的问题。所以我和其他人一起尝试并发现了下面的问题。

可能的解决方案

在 module.exports 中，应该编辑 optimization 对象

optimization: {
    minimize: true,
    namedModules: true,
    namedChunks: true,
    removeAvailableModules: true,
    flagIncludedChunks: true,
    occurrenceOrder: false,
    usedExports: true,
    concatenateModules: true,
    sideEffects: false, // <----- in prod defaults to true if left blank
}

编辑:所有这些参数在生产和开发之间都设置为相反，您可以根据自己的空闲时间调整它们，一些问题源于它们

解释

切换所有参数后，我发现 sideEffects 是破坏事物的那个，我明白了原因:

sideEffects flag根据 documentation on sideEffects 将进口分解为单独的进口:

import { a, b } from "big-module-with-flag"

被重写为

import { a } from "big-module-with-flag/a";
import { b } from "big-module-with-flag/b";

并将尝试相应地优化跨模块的导入，这可能会导致生产出现问题。通常这应该有助于通过减少包来优化包的大小，代价是删除一些导入，但可能会在导入时破坏东西。

我希望解释清楚一些，如果有人对 WebPack 优化有更深入的了解，欢迎提供任何文档和增强功能。