EXTEND_ESLINT not working

[Josema]

Describe the bug

I'm trying to disable a eslint rule using the config of the oficial docs.

Which terms did you search for in User Guide?

https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

Environment

  current version of create-react-app: 3.4.1
  running from /home/enzo/.npm/_npx/4039/lib/node_modules/create-react-app
  System:
    OS: Linux 4.4 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: Not Found
    npm: 6.11.2 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: 16.12.0 => 16.12.0
    react-dom: 16.12.0 => 16.12.0
    react-scripts: 3.0.1 => 3.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

.env

EXTEND_ESLINT=true

package.json

...
    "eslintConfig": {
        "extends": [
            "react-app"
        ],
        "rules": {
            "no-template-curly-in-string": "off",
            "no-unused-vars": "off"
        }
    }

npm run dev

Expected behavior

Not showing errors. Everything works as expected when running npm run lint

Actual behavior

Compiled with warnings.

./src/index.js
  Line 1:17:  'useState' is defined but never used  no-unused-vars        

./src/locale/translations.js
  Line 4:5:   Unexpected template string expression  no-template-curly-in-string
  Line 6:13:  Unexpected template string expression  no-template-curly-in-string

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

[yucigou]

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
              },

So my suggestion is to make this cache option configurable, and by default set it to false, to avoid confusion.

[Josema]

Still showing the errors when npm run dev or npm run build.

[yucigou]

It works for me. @Josema, if your demo project is OK to put on github, probably I could help take a look.

[Josema]

https://github.com/ocio/conkis-client

[yucigou]

@Josema Thanks. I tried with your project, and found if you upgrade react-scripts from 3.0.1 to 3.4.1 in package.json, it will work as expected:

  "react-scripts": "3.4.1"

To be sure you can re-install all packages, run:

rm -fr node_modules
npm install

Lastly, go to node_modules/react-scripts/config/webpack.config.js and set the eslint cache to false as I explained earlier:

          use: [
            {
              options: {
                cache: false, // By default, it is true
                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
              },

[Josema]

Thank you @yucigou for taking the time to solve it :) It works as expected.