Disable error overlay in development mode

Question

Is there a way to disable the error overlay when running a create-react-app in development mode?

This is the overlay I\'m talking about:

I\'m askin

Answer 1

To solve this issue, you could use CSS:

body > iframe {
  display: none !important;
}

Answer 2

I had the same problem and I have been digging in the create-react-app source for a long time. I can't find any way to disable it, but you can remove the listeners it puts in place, which effectivly stops the error message. Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in place by unhandledError.js. You can also close the error message by clicking the x in the upper right corner of the screen, and then you should see your message.

Answer 3

We don't provide an option to disable the error overlay in development. Error boundaries do not take its place (they are meant for production use).

There is no harm having both the development error overlay and your error boundary; simply press Escape if you'd like to view your error boundary.

We feel the error overlay provides tremendous value over your typical error boundary (source code, click to open, etc). It is also vital as we explore enabling hot component reloading as a default behavior for all users.

If you feel strongly about disabling the overlay, you'll need to eject from react-scripts and discontinue use of webpackHotDevClient. A less intrusive method may be removing the error event listener installed by the overlay off of window.

Answer 4

There is no option for it.

But, if you strongly wanted to disable modal window, just comment out this line

https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-dev-utils/webpackHotDevClient.js#L173

Answer 5

The error overlay can be disabled by using the stopReportingRuntimeErrors helper utility in the react-error-overlay package.

First, install the react-error-overlay package:

yarn add react-error-overlay

Then in index.js — right before mounting the root React component, import the utility and invoke it like this:

import { stopReportingRuntimeErrors } from "react-error-overlay";

if (process.env.NODE_ENV === "development") {
  stopReportingRuntimeErrors(); // disables error overlays
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Error overlays in create-react-app should now be disabled.