'Disable error overlay in development mode

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 asking this because im using error boundaries (React 16 Error Boundaries) in my app to display error messages when components crashes, but the error overlay pops up and covers my messages.

create-react-app

Solution 1:^[1]

An alternate solution is to add the following CSS style:

iframe
{
    display: none;
}

This prevents the error from showing.

Solution 2:^[2]

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.

Solution 3:^[3]

You can suppress React's error event handling by capturing the event first. for example, by placing in public/index.html's <head>:

<script>
      window.addEventListener('error', function(e){
        // prevent React's listener from firing
        e.stopImmediatePropagation();
        // prevent the browser's console error message 
        e.preventDefault();
      });
</script>

Since you probably still want React's error overlay for errors outside the error boundary, consider this option:

<script>
      window.addEventListener('error', function(e){
        const {error} = e;
        if (!error.captured) {
          error.captured = true;
          e.stopImmediatePropagation();
          e.preventDefault();
          // Revisit this error after the error boundary element processed it 
          setTimeout(()=>{
            // can be set by the error boundary error handler
            if (!error.shouldIgnore) {
              // but if it wasn't caught by a boundary, release it back to the wild
              throw error;
            }
          })
        }
      });
</script>

assuming your error boundary does something like:

    static getDerivedStateFromError(error) {
        error['shouldIgnore'] = true;
        return { error };
    }

The result is a behaviour that follows try...catch line of reasoning.

Solution 4:^[4]

To solve this issue, you could use CSS:

body > iframe {
  display: none !important;
}

Solution 5:^[5]

for some reason the overlay popped up for me only now while upgrading to Webpack 5. In any case, you can now cancel the overlay by adding in your webpack.config.js:

module.exports = {
  //...
  devServer: {
    client: {
      overlay: false,
    },
  },
};

Or through the CLI: npx webpack serve --no-client-overlay

Taken from here: https://webpack.js.org/configuration/dev-server/#overlay

Solution 6:^[6]

In config/webpack.config.dev.js, comment out the following line in the entry array

require.resolve('react-dev-utils/webpackHotDevClient'),

And uncomment these two:

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),

Solution 7:^[7]

To avoid bundling in this large dev library in prod you can use a dynamic import:

yarn add react-error-overlay

if (process.env.NODE_ENV === 'development') {
  import('react-error-overlay').then(m => {
    m.stopReportingRuntimeErrors();
  });
}

Solution 8:^[8]

I think this makes sense but sometimes when you are typing and have an error boundary then the overlay pops up with each character stroke and is annoying. I can remove the handler I suppose.

Solution 9:^[9]

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

Solution 10:^[10]

In the file webpack.config.js, comment the line:

 // require.resolve('react-dev-utils/webpackHotDevClient'),

And uncomment:

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),

In the file webpackDevServer.config.js, comment:

// transportMode: 'ws',
// injectClient: false,

Solution 11:^[11]

hide it with adblock

It is very useful to disable the errors temporarily so you don't have to comment/uncomment parts of your code that is not used at the moment, but it definitely will be after a few more changes.

The quickest solution is to just use adblock to pick the iframe with the errors.

It is trivial to toggle it with a single click to enable / disable adblock on the given page.

It is counter-intuitive to overlay the rendered page in development mode just to inform the user the newly imported objects or the recenlty created variables are not yet used.

I would say it is an arrow to the knee for beginners :)

Solution 12:^[12]

If you are using the latest version with react-script >= 5.0.0, you just need to add an environment variable ESLINT_NO_DEV_ERRORS=true. https://create-react-app.dev/docs/advanced-configuration

Solution 13:^[13]

The css fix has changed:

body > hmr-error-overlay {
  display: none;
}

I'll also recommend adding this block on init so that you don't get silent errors:


window.addEventListener('error', function (e) {
  console.error(e.message);
  // prevent React's listener from firing
  e.stopImmediatePropagation();
  // prevent the browser's console error message
  e.preventDefault();
});

Solution 14:^[14]

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.

Solution 15:^[15]

Gathering answers here together, I managed to solve this issue for myself.

Here is the package I created for this.

Solution 16:^[16]

If you'd like to minimize this by default (behind a small "Show Errors" button) without completely disabling, I wrote a small package for this.

npm i hide-cra-error-overlay

Then import in index.js (or another file):

import "hide-cra-error-overlay";

That's it- whenever the overlay would normally have appeared, you'll instead see a "Show Errors" button at the lower right corner that you can click to toggle it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Cody Gray
Solution 2
Solution 3	oguz ismail
Solution 4	feralamillo
Solution 5	Adam
Solution 6	ings0c
Solution 7
Solution 8	JimTheDev
Solution 9	ColCh
Solution 10	Î².ÎµÎ·Î¿Î¹Ï„.Î²Îµ
Solution 11	Szabolcs Dombi
Solution 12	Micael Mota
Solution 13	Black Mamba
Solution 14	Jani
Solution 15	jeron-diovis
Solution 16	lt1

'Disable error overlay in development mode

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]