升级到最新 CRA 和 Node 18 后随机出现“未捕获的运行时错误”消息

Question

我们的 DevOps 团队通知我们，他们将把所有服务器升级到 Node 18。但是我们的应用程序只能在 Node 16 上正常工作。所以我将 CRA 升级到最新版本，一开始看起来还不错。但随后随机的“未捕获的运行时错误”覆盖消息开始在开发模式下弹出。它们是完全随机的，当我单击链接时，有时它会显示，下次它不会显示。根据错误信息我无法找到问题的根源。留言总是这样：

Uncaught runtime errors:
×
ERROR
Cancel
    at handleError (http://localhost:3000/static/js/bundle.js:614149:58)
    at http://localhost:3000/static/js/bundle.js:614172:7

当我查看控制台时，它是这样的：

Uncaught (in promise) 
Cancel {message: undefined}
message: undefined
[[Prototype]]: Object

当我查看bundle.js中的指定行时，它们是这样的：

bundle.js:614149:58

var handleError = function handleError(error, fallbackMessage) {
     **var errorObject = error instanceof Error ? error : new Error(error || fallbackMessage);**
      var shouldDisplay = typeof options.catchRuntimeError === "function" ? options.catchRuntimeError(errorObject) : true;
      if (shouldDisplay) {
        overlayService.send({
          type: "RUNTIME_ERROR",
          messages: [{
            message: errorObject.message,
            stack: (0,_overlay_runtime_error_js__WEBPACK_IMPORTED_MODULE_1__.parseErrorToStacks)(errorObject)
          }]
        });

bundle.js:614172:7

(0,_overlay_runtime_error_js__WEBPACK_IMPORTED_MODULE_1__.listenToUnhandledRejection)(function (promiseRejectionEvent) {
   **var reason = promiseRejectionEvent.reason;**
      handleError(reason, "Unknown promise rejection reason");
    });

Answer 1

终于找到问题的根源了。最新版本的 webpack-dev-server 有一个新功能，被描述为“覆盖显示未处理的承诺拒绝”。这是导致问题的原因，降级到以前的版本解决了它。

Answer 2

创建 React 应用程序中的 webpack-dev-server 问题。检查您的 Node.js 和 create-react-app 版本并确保它们彼此兼容。您可以使用

node -v and npx create-react-app --version

检查您的版本。如果它们已经过时或不匹配，您可以尝试更新它们或将它们降级到稳定版本。

我也遇到同样的问题。我将node降级到14.17.1，问题已经解决了