1

Our DevOps team informed us that they will be upgrading all servers to Node 18. But our app was working properly only with Node 16. So I upgraded CRA to latest version and at first it seems fine. But then random "Uncaught runtime errors" overlay messages begin popping up in development mode. They are completely random, when I click a link sometimes it shows up, the next time it doesn't show up. I can't find the source of the problem according to error messages. Message are always like this:

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

When I look at console, it is like this:

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

When I look at the specified rows at bundle.js, they are like this:

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");
    });
0

3 Answers 3

5

Finally I found the source of the problem. Latest version of webpack-dev-server has a new feature described as "Overlay displays unhandled promise rejection". This was causing the problem, downgrading to previous version solved it.

npm install [email protected] --save --save-exact --save-dev
2
  • I don't have webpack-dev-server installed as a package. Where and how should I downgrade that package? Commented Sep 18, 2023 at 23:43
  • npm install [email protected] --save --save-exact --save-dev Commented Oct 3, 2023 at 14:59
0

issue with the webpack-dev-server in create react app. Check your Node.js and create-react-app versions and make sure they are compatible with each other. You can use node -v and npx create-react-app --version to check your versions. If they are outdated or mismatched, you can try to update them or downgrade them to a stable version.

I am experiencing the same problem. I downgraded CRA and the problem has been resolved.

0

Add following in your webpack config

{
  devServer: {
    client: {
      overlay: false, // <- add this
    }
  }
}

Ref - https://webpack.js.org/configuration/dev-server/#overlay

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.