Create-React-App遇eslint import/no-webpack-loader-syntax报错无法构建如何解决

报错原因 #

该报错是ESLint的import/no-webpack-loader-syntax规则触发的，禁用规则不生效的原因有两个：

1. Create-React-App（CRA）默认使用内置的ESLint校验逻辑，若你未做额外配置，项目根目录的ESLint配置无法覆盖CRA的默认规则，生产构建阶段依然会执行内置规则校验。
2. 你编写的单行ESLint禁用注释位置错误：注释写在了mapboxgl.workerClass =行的上方，eslint-disable-next-line只会生效于紧接的下一行，而真正用到webpack loader内联语法的require代码在更靠后的行，没有被禁用规则覆盖。

修复方案 #

• 方案1：修正注释位置
  把禁用注释移到require代码的前一行，或者把禁用注释和require写在同一行：

  import mapboxgl from 'mapbox-gl';
  mapboxgl.workerClass =
    // eslint-disable-next-line import/no-webpack-loader-syntax
    require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
  

  或者：

  import mapboxgl from 'mapbox-gl';
  // eslint-disable-next-line import/no-webpack-loader-syntax
  mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
  

• 方案2：关闭CRA构建阶段的ESLint校验
  在项目根目录新建.env文件，添加如下配置：

  DISABLE_ESLINT_PLUGIN=true
  

  该配置会直接关闭CRA构建时的ESLint校验，适合本地开发阶段已经做了完善代码校验的场景。

• 方案3：移除内联loader语法，通过webpack配置加载worker
  如果使用craco、react-app-rewired等工具自定义CRA的webpack配置，可在webpack配置中新增loader规则：

  module.exports = {
    webpack: {
      module: {
        rules: [
          {
            test: /mapbox-gl-csp-worker\.js$/,
            loader: 'worker-loader',
            options: {
              filename: '[name].[contenthash].worker.js'
            }
          }
        ]
      }
    }
  }
  

  之后修改业务代码，不需要再写内联loader语法：

  import mapboxgl from 'mapbox-gl';
  import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';
  mapboxgl.workerClass = MapboxWorker;
  

  该方案从根源避免触发import/no-webpack-loader-syntax规则，可维护性更高。

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