Missing Error Overlay

[alpezed]

Hi, I have created and running new react app but the error overlay is not showing on the screen, i can only saw it in the console. can you please help me how can i enable this to development environment. Thanks

[Forlaenu]

Your issue is with javascript, not react. React errors will give an overlay, whereas javascript errors crash the react app, hence no overlay.

In this case, .map is not a method for objects, but arrays.
let arrayName = []
arrayName.map()

[alpezed]

I have intentionally created that js error to demonstrate the issue on my current project, because on my other or previous application this is the browser screen, you can see the error show up on the page and not just a white screen. Hope anyone can help me enable this on development environment.

[dinadeljanin]

There are a few issues about this already (#11804 and #11919). It's been bugging me as well.

[viktor-radchenko]

Your issue is with javascript, not react. React errors will give an overlay, whereas javascript errors crash the react app, hence no overlay.

In this case, .map is not a method for objects, but arrays. let arrayName = [] arrayName.map()

I can confirm I'm having the same issue, and when I intentionally make react-related error (i.e. incorect import of components) I can see the overlay. However, before in CRA version 4.0.3 error overlay was also showing JS errors (i.e. map over undefined, not a function, etc). This is really helpful feature during development, and it's not particularly clear why they have removed it

I ended up downgrading to 4.0.3 since it seems to be providing better development support and error overlay immediately appeared for JS specific error
working overlay in CRA 4.0.3

[KutnerUri]

god I thought there was something wrong with my computer.

I'm guessing this has something to do with the change to Wepack 5 or WebpackDevServer 4.
Using ReactRefreshWebpackPlugin's built in error overlay shows the runtime errors correctly, like so:

[KutnerUri]

Though it was removed from CRA, react-error-overlay should still have all the behavior and styles we want, but for the life of me I can't make it work with Webpack5 / @pmmmwh/react-refresh-webpack-plugin@0.5.4.
It seems the CRA team did not update the react-error-overlay to work with these.

This configuration used to work:

react-dev-utils's readme file did say it's only compatible with Wbpk 3, as seen here, but it had worked with Wbpk4.

new ReactRefreshWebpackPlugin({
  overlay: {
    entry: require.resolve("react-dev-utils/webpackHotDevClient"),
    module: require.resolve("react-dev-utils/refreshOverlayInterop"),
  },
});

Whenever I eject a CRA (even with older versions of react-scripsts) I keep getting a webpack config without the react-error-overlay, so I don't have anything to compare this to. :/
I tried tweaking the files using the defaults, but to no avail.

maybe @pmmmwh would have an insight?

[ldeninski]

I am facing the same problem. The react overlay is really useful when catching errors that cause for example an event handler to crash. It is much better to show the overlay instead of nothing happening in response to a click in an async context.

[Kyokatarz]

Using ReactRefreshWebpackPlugin's built in error overlay shows the runtime errors correctly, like so:

@KutnerUri Is there a way to apply your temporary fix to CRA?

[sorinpav]

Any chance we could get an idea when this will be fixed, please?

For projects that are not ejected, it's impossible to change the webpack config, so we could really do with a proper fix.

[KutnerUri]

@Kyokatarz - sorry, it was a while ago, I forgot what I've done. It was tinkering with react-fast-refresh, probably after ejecting CRA.

checkout "error overlays" here - https://github.com/pmmmwh/react-refresh-webpack-plugin#overlay-integration