How can I disable the overlay for warnings in a React app?

Question

I’m using react-app-rewired and I want to disable the overlay for Typescript warnings that appears every time I compile. For reasons I don't understand, warnings that the VSCode Typescript checker doesn't pick up appear on the overlay; webpack is being a stricter enforcer (stricter than I want it to be in fact).

Anyway, I tried react-app-rewired start --no-client-overlay and I tried this for my config-overrides.js file:

module.exports = {
    webpack: function (config, _) {
        config.devServer = {
            client: {
                overlay: false
            }
        }
        return config
    }
}

Neither has any effect. It would be good to know how to disable the overlay but an equally good solution would be how to have the compiler use the same level of strictness that VSCode does.

Answer 1

create-react-app generates a separate Webpack configuration for use with the dev server, so you need to use the devServer function, like so:

module.exports = {
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      // Create the default config by calling configFunction with the proxy/allowedHost parameters
      const config = configFunction(proxy, allowedHost);

      config.client = {
        overlay: false,
      };

      return config;
    };
  },
};

From the react-app-rewired docs:

Webpack Dev Server

When running in development mode, create-react-app does not use the usual Webpack config for the Development Server (the one that serves the app pages). This means that you cannot use the normal webpack section of the config-overrides.js server to make changes to the Development Server settings as those changes won't be applied.

Instead of this, create-react-app expects to be able to call a function to generate the webpack dev server when needed. This function is provided with parameters for the proxy and allowedHost settings to be used in the webpack dev server (create-react-app retrieves the values for those parameters from your package.json file).

React-app-rewired provides the ability to override this function through use of the devServer field in the module.exports object in config-overrides.js. It provides the devServer function a single parameter containing the default create-react-app function that is normally used to generate the dev server config (it cannot provide a generated version of the configuration because react-scripts is calling the generation function directly). React-app-rewired needs to receive as a return value a replacement function for create-react-app to then use to generate the Development Server configuration (i.e. the return value should be a new function that takes the two parameters for proxy and allowedHost and itself returns a Webpack Development Server configuration). The original react-scripts function is passed into the config-overrides.js devServer function so that you are able to easily call this yourself to generate your initial devServer configuration based on what the defaults used by create-react-app are.