React编译遇ESLint import/first错误，常规方案无效求助

Hey there, let's tackle this frustrating ESLint import/first error you're facing with Recharts—totally get it when standard fixes don't pan out, especially when the issue stems from a third-party library file instead of your own code.

The Root Cause #

Looking at the ../recharts/es6/index.js snippet you shared, the problem is clear: the file alternates import statements with export statements, like this:

import _Brush from './cartesian/Brush'; export { _Brush as Brush }; import _ReferenceLine from './cartesian/ReferenceLine'; export { _ReferenceLine as ReferenceLine };...

ESLint's import/first rule enforces that all import declarations must come before any other statements (including export). Since this is a third-party file you shouldn't modify directly, standard fixes like reordering your own imports won't solve the problem.

Solutions That Work #

Here are targeted fixes tailored to this scenario:

• Exempt the specific Recharts file from the import/first rule
  This is the cleanest approach—instead of disabling the rule entirely (which would break your own code's linting), add an override in your ESLint configuration file (.eslintrc.js, .eslintrc.json, or package.json):

  For .eslintrc.js:

  module.exports = {
    // Your existing ESLint config (extends, rules, etc.)
    overrides: [
      {
        files: ['node_modules/recharts/es6/index.js'],
        rules: {
          'import/first': 'off'
        }
      }
    ]
  };
  

  This tells ESLint to skip checking the import/first rule only for this specific file, leaving your project's other linting rules intact.

• If you're using Create React App (CRA)
  CRA hides its ESLint config by default. To add the override, you'll need to use react-app-rewired or customize-cra:

  1. Install the dependencies: npm install react-app-rewired customize-cra --save-dev
  2. Create a config-overrides.js file in your project root:

     const { override, adjustEslintOptions } = require('customize-cra');
     
     module.exports = override(
       adjustEslintOptions(options => {
         options.overrides = [
           ...(options.overrides || []),
           {
             files: ['node_modules/recharts/es6/index.js'],
             rules: {
               'import/first': 'off'
             }
           }
         ];
         return options;
       })
     );
     

  3. Update your package.json scripts to use react-app-rewired instead of react-scripts.

Why Standard Fixes Failed #

Most online solutions focus on fixing import order in your own code, but this issue is unique because the problematic code lives in a third-party library. Modifying the library's files directly is risky (updates will overwrite your changes) and not recommended—so targeting the rule exemption is the safest, most sustainable fix.

内容的提问来源于stack exchange，提问作者G.Musgrave