如何在 React 应用程序中禁用警告叠加层？

Question

我正在使用 react-app-rewired 并且我想禁用每次编译时出现的 Typescript 警告的覆盖。由于我不明白的原因，VSCode 打字稿检查器没有接收到的警告出现在叠加层上； webpack 正在成为一个更严格的执行者（实际上比我想要的更严格）。

无论如何，我尝试了 react-app-rewired start --no-client-overlay 并且我为我的 config-overrides.js 文件尝试了这个：

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

两者都没有任何效果。最好知道如何禁用覆盖，但同样好的解决方案是如何让编译器使用与 VSCode 相同的严格级别。

Answer 1

如果您使用的是 Webpack v4 (CRA v4)，这应该是您正在寻找的文档 https://v4.webpack.js.org/configuration/dev-server/#devserveroverlay

module.exports = {
    webpack: function (config, _) {
        config.devServer = {
            overlay: {
                warnings: true,
                errors: true
            }
        }
        return config
    }
}

您上面提供的配置适用于 Webpack v5 (CRA v5)，因此请确保您使用的是 CRA v5（并检查 react-app-rewired 是否支持该版本）。

Answer 2

create-react-app 生成一个单独的 Webpack 配置用于开发服务器，所以你需要使用 devServer 函数，像这样：

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;
    };
  },
};

来自 react-app-rewired 文档：

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.