CODEWITHSUNDEEP
javascriptreactjswebpack
Alex
Alex

Reputation: 2800

Make the Webpack React Fast Refresh plugin ignore linting errors

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.

enter image description here

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

Upvotes: 2

Views: 1247

Answers (1)

Alex
Alex

Reputation: 2800

I missed this in the API docs:

new ReactRefreshWebpackPlugin({ overlay: false })

Upvotes: 2

Related Questions