如何让Webpack的React Fast Refresh插件忽略linting等非阻断性错误

你遇到的问题是该插件默认启用的错误遮罩层会捕获所有编译阶段的报错（包括ESLint这类仅校验性质的非阻断告警/错误），直接覆盖页面导致无法正常预览，可通过以下三类配置调整：

1. 调整react-refresh-webpack-plugin插件参数 #

修改你配置中的插件初始化代码，新增overlay配置项过滤非阻断错误，或直接关闭遮罩层：

// 原代码
// isDevelopment && new ReactRefreshWebpackPlugin(),
// 替换为以下配置
isDevelopment && new ReactRefreshWebpackPlugin({
  overlay: {
    // 方案1：直接关闭错误遮罩，所有编译/运行时错误都不会遮挡页面
    // enabled: false,
    // 方案2：保留遮罩仅过滤ESLint类错误，不影响正常运行时错误提示
    filter: (error) => !error.message.includes('ESLintError')
  }
}),

2. 调整ESLint Loader配置 #

将ESLint的校验结果设置为警告级别，不会触发编译错误拦截逻辑：

// 找到你webpack配置中eslint-loader对应的规则，修改options配置
{
  test: /\.[jt]sx?$/,
  exclude: /node_modules/,
  enforce: 'pre',
  use: [
    {
      loader: 'eslint-loader',
      options: {
        // 所有lint错误都以警告形式输出，不会触发编译错误
        emitWarning: true,
        // 关闭lint错误阻断编译的逻辑
        failOnError: false
      }
    }
  ]
}

3. 调整webpack-dev-server配置 #

如果使用webpack-dev-server启动项目，也可以通过devServer配置过滤警告类提示：

module.exports = {
  // 其余配置保持不变
  devServer: {
    hot: true,
    client: {
      overlay: {
        errors: true,
        // 忽略所有警告类提示，包括lint警告
        warnings: false,
      },
    },
  }
}

内容的提问来源于stack exchange，提问作者Alex