React Router's default error element is showing above my error element

[vijtheveg]

A strange issue is happening in my ReactJS app. If an exception is thrown when one of my non-root-level components is rendering, the custom error element that I have specified at the root level is shown (<CatchAllErrorHandler />), but then React Router's default error element is shown above it! If this default error element is dismissed (by clicking on the 'x' at the top right) my error element is below.

This is what the routes look like:

This is the result when the error is thrown:

If you look carefully, you can see the outline of my custom error element under the default error element.

And sure enough, if I dismiss the default error element, my error element is below.

By the way, in the console, there is a log entry that says

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.

Any idea what may be happening? I'll really appreciate any pointers - I have spent hours on this and am none the wiser.

[tatsmaki]

This is react-router error window

And this is webpack error window (or vite)

This error won't be visible in production. If you want to adjust it for development – check webpack docs to configure devServer overlay
https://webpack.js.org/configuration/dev-server/#overlay

Something like this will work

devServer: {
    client: {
         overlay: {
             errors: false
         }
    }
}

[tatsmaki]

If you are using create-react-app – you can either

1. switch to webpack/vite as soon as possible
2. execute eject script
3. try tools like https://www.npmjs.com/package/customize-cra or https://www.npmjs.com/package/react-app-rewired

[vijtheveg]

@tatsmaki Thank you very much for the quick and detailed response - you have been very helpful! It is good to know that this overlay won't appear in production.