时间戳

首页 > 解决方案 > 未捕获的类型错误：无法读取 __webpack_require__ 处未定义的属性“调用”

javascript - 未捕获的类型错误：无法读取 __webpack_require__ 处未定义的属性“调用”

问题描述

我正在使用 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）为什么它只在开发模式而不是生产模式下引起？

更新

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

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

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

标签： javascriptreactjswebpack

解决方案

过程

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

我决定尝试复制部署环境并检查我是否至少可以“破坏”开发并从这里调查问题。这些是生产和开发之间不同的参数，并且可能导致手头的问题（例如，您可以通过切换到相反的值来尝试自己放置您deployment喜欢的development环境）。

在我在评论中提供的链接上，用户解释说问题出在部署级别，并且vendors块的构建方式与块碰撞main并相互切割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 上的文档，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 优化有更深入的了解，欢迎任何文档和增强。

推荐阅读