Javascript 未捕获类型错误：无法读取属性'；呼叫'；未定义的at\uu网页包的__

我使用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>
 )

问题

1） 是什么导致了这个错误？ 2） 为什么它只在开发模式下产生，而不是在生产模式下产生

更新

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

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

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

Process 为了找到这个问题的潜在解决方案，我不得不修补优化模块，这确实是这里的问题，即使没有意外启用。 我的最佳猜测是，某些参数在

生产

模式下设置为默认值，而不是在

开发

模式下，这会导致导入和未定义属性的问题

我决定尝试复制部署环境，并检查是否至少可以“中断”开发，并从这里调查问题。这些参数在生产和开发之间是不同的，并且可能是导致当前问题的原因（您可以切换到相反的值以放置您的

部署

，例如

开发

环境）

在我在评论中提供的问题上，用户解释说问题是在部署级别，并且

供应商

区块的构建方式与

主

区块冲突，并将

条目

相互剪切。其中一个解决方案是使用

concatenateModules:false

，显然，这并没有解决我的问题。因此，我尝试与其他人一起，发现问题如下

势解 在

模块.exports

中，应编辑

优化

对象

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
}

被改写为

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

并将尝试在模块间相应地优化导入，这可能会导致生产中出现问题。通常情况下，这有助于通过减少捆绑包来优化包的大小，代价是删除一些导入，但在导入时可能会破坏某些内容

---

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

我不知道你在解决这个问题上走了多远，我站在我这边，试图找到解决方案。其中一个原因似乎与代码的优化有关。如果我理解正确的话，有一些问题会导致一些文件失去对模块的引用，因此会出现“未定义”的问题。我还在努力，如果我找到了解决方案，我会回到你的问题上来。我还认为这是

副作用

标志，对我的帮助是将我的

v4

webpack

从

4.12

升级到

最新的
（
4.45
），最小的帮助版本是
4.30
（已修复，与
块有关）
）非常感谢发布完整的
优化
对象，其所有选项都切换到相反的值！将此列表一分为二可以节省我对非常具体问题的几个小时的调查。
import { a, b } from "big-module-with-flag"

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