Repository navigation
Missing Error Overlay #12014
Description
Activity
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 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.
Reacted by dinadeljanin, Pavel Müller, CHAIMA BENKADDOUR and Andrei PatriciuYour 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.3Reacted by dinadeljanin, Ed, William Nazarian and Promise Ihunnagod I thought there was something wrong with my computer.
I'm guessing this has something to do with the change to
Wepack 5orWebpackDevServer 4.
UsingReactRefreshWebpackPlugin's built in error overlay shows the runtime errors correctly, like so:
Reacted by dinadeljaninThough it was removed from CRA,
react-error-overlayshould 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 thereact-error-overlayto 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?
Reacted by Ed, Jaroslav Kondela and dinadeljaninI 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.
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?
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.
@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
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