使 Webpack React Fast Refresh 插件忽略掉毛错误

Question

I am using this plugin for HMR: https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin .

How can I stop it from preventing the page from displaying for non-breaking errors?

For example linting issues.

My setup is pretty much copied from their example:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');
// ... your other imports
 
const isDevelopment = process.env.NODE_ENV !== 'production';
 
module.exports = {
  // It is suggested to run both `react-refresh/babel` and the plugin in the `development` mode only,
  // even though both of them have optimisations in place to do nothing in the `production` mode.
  // If you would like to override Webpack's defaults for modes, you can also use the `none` mode -
  // you then will need to set `forceEnable: true` in the plugin's options.
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      // ... other rules
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          // ... other loaders
          {
            loader: require.resolve('babel-loader'),
            options: {
              // ... other options
              plugins: [
                // ... other plugins
                isDevelopment && require.resolve('react-refresh/babel'),
              ].filter(Boolean),
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // ... other plugins
    isDevelopment && new webpack.HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),
  // ... other configuration options
};

Answer 1

我在 API 文档中遗漏了这一点：

new ReactRefreshWebpackPlugin({ overlay: false })