How to configure eslint by useEslintRc?

[ainannan2010]

I'm confused about using customize-cra to configure Eslint, which is always unsuccessful. I created the required files .eslintrc.js and .config-overrides.js in the root directory. The code is as follows, but it doesn't work after I set the rules. I'm depressed. What should I do?

[ehacke]

I have the same issue. Maybe it's the .eslintrc.js filename? I'm not sure.

The linting works properly when run manually, and during commit. But webpack explodes.

I've given up for now.

[pyyding]

Seems like React team started supporting custom eslint configs from CRA 3.x. This worked for me:

1. Remove all uses of useEslintRc from config-overrides.js
2. Update start script in package.json to EXTEND_ESLINT=true react-app-rewired start

[ae2438]

@pyyding I came looking at customize-cra because there are still quite a few issues with CRA's option. Particularly with mixed JS/TS code bases (what we have). So useEslintRc could still be useful for me (assuming it gives me full control of the ESLint config, unlike CRA) if it actually worked.

When using useEslintRc, the file does seem to be loaded, because if I use invalid values an error is thrown. However, none of the config actually seems to be used, instead it seems to be using the default config provided by CRA.

[Hideman85]

I have the same issue.

I also found the EXTEND_ESLINT=true but it do the same things.

I also made a .eslintrc.js and specified this file to useEslintRc and in order to see if it's read by any package I added a console.log inside this file.

When I use directly eslint it works fine and when it's via npm run start-rewired I have the error coming.

Even with EXTEND_ESLINT=true

• It read my .eslintrc.js but don't care about the configuration
• I also tried .eslintrc.json like mentionned in https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app
• Or eslintConfig in package.json like explained here https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

But nothing works.

[ChrisSargent]

See here, there are issues with the EXTEND_ESLINT=true. https://github.com/facebook/create-react-app/issues/7776

[mikko-tormala]

Experiencing the same problems detailed above with trying load a custom .eslintrc.js file, I wrote a custom override:

// file: config-overrides.js

const { useBabelRc, override } = require('customize-cra');

// Import your eslint configuration here
const eslintConfig = require('./.eslintrc.js');

const useEslintConfig = configRules => config => {
  const updatedRules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some( use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0];
        const baseOptions = ruleUse.options;
        const baseConfig = baseOptions.baseConfig || {};
        const newOptions = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules }
        }
        ruleUse.options = newOptions;
        return rule;

      // Rule not using eslint. Do not modify.
      } else {
        return rule;
      }
    }
  );

  config.module.rules = updatedRules;
  return config;
};


// Support environment -specific settings
const env = process.env.NODE_ENV;
const envs = {
  development: override(
    useEslintConfig(eslintConfig), // Use your imported .eslintrc.js file here
    useBabelRc(),
  ),
  production: override(
    useBabelRc(),
  ),
};

module.exports = envs[env];

Hopefully will help someone. 😊

[waltz]

@mikko-tormala Thanks for building this and posting it! It would be great if this was a fix for this project, would you be open to me making this in to a PR?

@arackaf Would you be open to a PR addressing this issue? Seems like we have a workable solution and I think it'd be great to incorporate it upstream.

[mikko-tormala]

@mikko-tormala Thanks for building this and posting it! It would be great if this was a fix for this project, would you be open to me making this in to a PR?

I have no objections. I'm glad it helped someone 😀 👍

[ahmad2smile]

this temp fix worked perfectly, now waiting for official supp now

[hugolfreitas]

I found a solution!

First, thanks to @mikko-tormala for the solution, you helped me!

Fixed this problem with path:

const { override, useEslintRc } = require('customize-cra');

const path = require('path');

module.exports = override(
  useEslintRc(path.resolve(__dirname, '.eslintrc.json')),
);

[zzbo]

Thanks for mikko-tormala answer, I made a package https://www.npmjs.com/package/customize-cra-eslint

npm i customize-cra-eslint -D

[YoursOwen]

Thanks for @mikko-tormala, it was useful!

[hiddenboox]

I found a solution!

First, thanks to @mikko-tormala for the solution, you helped me!

Fixed this problem with path:

const { override, useEslintRc } = require('customize-cra');

const path = require('path');

module.exports = override(
  useEslintRc(path.resolve(__dirname, '.eslintrc.json')),
);

This solution currently not working, with this react-scripts also load default bad behaviour, only solution from @mikko-tormala