create-react-app: "Uncaught runtime errors" messages after upgrading to CRA 5.0.1 and Node 18

Hello, I’d like to share my findings because the same problem occurred in my project and I’ve investigated its cause.

The reason why full-screen error displays began occurring from CRA v5 is because webpack-dev-server, included in CRA’s dependencies, was updated from v3 to v4.

client.overlay (previously the overlay option) is now true by default. https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

• What is overlay? https://webpack.js.org/configuration/dev-server/#overlay

As written here, the default setting for how to display when an error or warning occurs has changed. If you change the overlay setting, you can disable the overlay display, but I think that’s a not good method.

In any case, we should fix our code that caused the error. It’s about catching exceptions that have been rejected.

Thanks a lot, I think you found a great lead for the source of the problem. At this topic I have noticed that, even though some people had been using the latest CRA for some time, they began experiencing this issue recently, after doing a fresh npm install.

I looked at webpack-dev-server release notes, and the latest v4.15.0 was released 3 weeks ago. It has only one new feature: “Overlay displays unhandled promise rejection”

Voila! This latest update seems to be the source of our problems. So, I ran this command and downgraded webpack-dev-server to the previous version:

npm install webpack-dev-server@4.14.0 --save --save-exact --save-dev

And now everything seems to be returned back to normal, and I don’t need to modify axios-interceptor. Thanks a lot for your investigation, it was great help. 🙏

EDIT: Another option is probably setting runtimeErrors to false at Webpack config. But since this is CRA, that requires a library like Craco without ejecting. I installed Craco and added below code to craco.config.js and it was successful.

module.exports = { webpack: { configure: (webpackConfig, { env, paths }) => { webpackConfig.entry = './src/index.tsx'; return webpackConfig; }, }, devServer: { client: { overlay: { errors: true, warnings: false, runtimeErrors: false, }, }, }, };

Hello, I’d like to share my findings because the same problem occurred in my project and I’ve investigated its cause.

The reason why full-screen error displays began occurring from CRA v5 is because webpack-dev-server, included in CRA’s dependencies, was updated from v3 to v4.

client.overlay (previously the overlay option) is now true by default. https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

• What is overlay? https://webpack.js.org/configuration/dev-server/#overlay

As written here, the default setting for how to display when an error or warning occurs has changed. If you change the overlay setting, you can disable the overlay display, but I think that’s a not good method.

In any case, we should fix our code that caused the error. It’s about catching exceptions that have been rejected.

I had the same issue when I was using await within the function that was calling an api and it did not have the async keyword that I forgot to add. Adding the async to the function fixed the issue. I hope this can help someone!

Having exactly the same issue after upgrading react-scripts to 5.0.0

@leticiafontoura I did the same but didn’t work, but then I found this version of the same code in stack overflow and worked for me. I hope you find it useful too.

 axios.interceptors.response.use(function (response) {
            throw new axios.Cancel('Operation canceled by the user.');
          }, function (error) {
            return Promise.reject(error);
        });

@JhordanOjeda @keremcanb I actually would like to avoid the overlay message hahaha on Friday it wasn’t showing if a request got canceled but yesterday, there it was. all I did was delete my node_modules and package.lock because of reasons and then this started

here’s my code:

  (response) => {
    responseHandler(response)
    return response
  },
  (error) => {
    if (!isJwtValid()) {
      return Promise.reject(new Error('Token inválido. Entre novamente.'))
    }
    if (error.message === 'Operation canceled due to new request.') {
      return Promise.reject(error)
    }
    if (
      window.location.pathname !== '/login'
      && window.location.pathname !== '/recover'
      && window.location.href.indexOf('password') < 0
    ) {
      if (error?.response?.status === 401 || error?.response?.status === 403) {
        localStorage.clear()
        window.location.href = '/login'
        return Promise.reject(error.response.data)
      }
      return Promise.reject(error.response.data)
    }
  }
)

@leticiafontoura I did the same but didn’t work, but then I found this version of the same code in stack overflow and worked for me. I hope you find it useful too.

I replaced the console.log in my code with your throw code like this:

axios.interceptors.response.use((error: AxiosError) => { if (Axios.isCancel(error)) { throw new axios.Cancel('Operation canceled by the user.'); } });

This means again it will show overlay cancel messages, which was the main problem of my original question.

But I also had a more serious problem. I was getting Uncaught TypeError: Cannot read properties of undefined (reading ‘data’) messages and it was causing white screen at the actual app, not only in development mode.

So now I’m back to point one, again having overlay cancel messages, but at least our app is not throwing white screen anymore. So thanks for this solution.

My colleague added an Axios.isCancel handler to the interceptor and it seems the problem is solved. Cancel error messages are not showing at overlay anymore.

axios.interceptors.response.use((error: AxiosError) => {
  if (Axios.isCancel(error)) {
    return console.log(error);
  }
});

Having exactly the same issue after upgrading react-scripts to 5.0.0

After further investigation, I think I might have spotted the source of the problem. It seems error messages are not random, but they come up when an API service response gets cancelled. Our Axios interceptor is not handling cancelled responses, so I will try adding a handler and see if that helps.

Same here as well. The app shows the error overlay when an endpoint call happens. Also clicking the ‘x’ button at the top right closes the error overlay and the app works without any issues.