EXTEND_ESLINT=true not working

[Barik85]

Describe the bug

Actually it re-opens #9047
I created .env file in root directory with EXTEND_ESLINT=true
then created .eslintrc.json file with my config for eslint
but while running npm start this config doesn't work!

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here.)

Steps to reproduce

1. npx create-react-app my-app --template typescript
2. add .env file in root directory with EXTEND_ESLINT=true
3. add .eslint.json with some rules, for example "no-unused-vars": ["error"]
4. Try to check if the rule is working. In App.tsx I added
   const a= '';

Expected behavior

Expect it will consider rules from .eslintrc.json and fail to build app.

Actual behavior

Ignoring rules from .eslintrc.json

Reproducible demo

https://github.com/Barik85/reproduce_issue_eslintrc

[tobiaskraus]

I quote an answer from #9007 :

I think this is caused by how react-scripts handles ESLint cache. By default, cache is set to true. If you set it to false, any change to eslint rules will be honoured every time. The setting is in node_modules/react-scripts/config/webpack.config.js:

use: [
  {
    options: {
      cache: true, // You can set it to false
      formatter: require.resolve('react-dev-utils/eslintFormatter'),
      eslintPath: require.resolve('eslint'),
      resolvePluginsRelativeTo: __dirname,
      // @remove-on-eject-begin
      ignore: isExtendingEslintConfig,
      baseConfig: isExtendingEslintConfig
        ? undefined
        : {
            extends: [require.resolve('eslint-config-react-app')],
          },
      useEslintrc: isExtendingEslintConfig,
      // @remove-on-eject-end
    },

and if this is your problem, I hope that my proposal #9085 would be accepted, and someone could implement it.

[poozhu]

I have test your example project, with the .eslintrc.json file, you can test the rule with another var name: c, it works well.

[JRasmusBm]

Following the suggestion from @tobiaskraus I added the following line to the scripts section of our package.json. It should work wherever sed is available and perform the change suggested whenever the dependencies are installed.

"postinstall": "sed \"s/cache: true/cache: false/g\" node_modules/react-scripts/config/webpack.config.js -i",

This resolved the issue such that our custom eslint config started working.

[lafe]

A cross-plattform solution might be to use the "patch-package" tool that can run as a postinstall-script and can patch files in node_modules. That's the approach we choose when we encountered this issue.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[lafe]

From our point of view, the issue is still present.

[croraf]

This should be closed in favor of #9085 @Barik85

[feyzullahyildiz]

I quote an answer from #9007 :

I think this is caused by how react-scripts handles ESLint cache. By default, cache is set to true. If you set it to false, any change to eslint rules will be honoured every time. The setting is in node_modules/react-scripts/config/webpack.config.js:

use: [
  {
    options: {
      cache: true, // You can set it to false
      formatter: require.resolve('react-dev-utils/eslintFormatter'),
      eslintPath: require.resolve('eslint'),
      resolvePluginsRelativeTo: __dirname,
      // @remove-on-eject-begin
      ignore: isExtendingEslintConfig,
      baseConfig: isExtendingEslintConfig
        ? undefined
        : {
            extends: [require.resolve('eslint-config-react-app')],
          },
      useEslintrc: isExtendingEslintConfig,
      // @remove-on-eject-end
    },

and if this is your problem, I hope that my proposal #9085 would be accepted, and someone could implement it.

I think there is another env key is needed to disable cache besides EXTEND_ESLINT. This solution is working well but its not a good way and not documented on https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[lafe]

Will check on it in the new year...