Question

运行生产版本时 React App 崩溃

2020-03-18

3832

javascript node.js reactjs webpack netlify

我可以使用本地开发服务器完美运行我的 react-app（使用 create-react-app 样板），但是当我使用 npm run build 编译它，然后使用服务器运行它（我尝试了 netlify 和本地 http-server）时，我只收到此错误，并且页面无法加载：

classCallCheck.js:1 Uncaught RangeError: Maximum call stack size exceeded
    at Object.a (classCallCheck.js:1)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)
    at e (Object.js:6)

文件 Object.js 位于 src/Model/Objects/Object.js 下。

GitHub： https://github.com/Tracer1337/DynaSys
在 Netlify 上部署： https://youthful-mestorf-9e0ba8.netlify.com/

我做错了什么？

Answer 1

这是一个有趣的调试问题。似乎您创建了一个名为 Object 的类，它是 JavaScript 中的受保护字。

您可以通过单击错误右侧的源代码来找出导致问题的原因。这将打开导致错误的相应文件（ create-react-app 默认提供源映射，因此即使在生产环境中调试也不是问题）。

我通过将 Object 类重命名为 InternalObject 解决了该问题，现在即使在生产模式下一切都运行良好！

至于为什么它在开发模式下使用该受保护的名称可以工作，我不知道。也许其他人有主意？

Answer 2

将此留在这里以供将来参考。我的 React 应用仅在生产版本中的一个特定屏幕上崩溃，但在开发环境中不会崩溃。

使用 adb logcat *:E ，我设法将其追踪到错误导入，很可能是由于 vscode 的 intellisense 从错误的位置导入函数造成的。

我没有执行 import { useState } from "react" ，而是从 "react/cjs/react.development" 导入了 useState() 函数。有趣的是，来自错误文件的 useState() 在开发版本中实际上运行良好（文件的名称可能暗示了原因）。