create-react-app — how to set EXTEND_ESLINT to true?

Question

I have created a .env file in my project root but I'm new to working with environments / variables and so I'm unsure how to integrate the file so I can override the stock, non-ejected react-app eslint settings.

// My .env file has just this

EXTEND_ESLINT = "true"

The c-r-a docs explain what the variable is, but not now to set it to true. Also, the section on 'Extending the ESLint config' is helpful only for once the var is set to true.

// stock create-react-app package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Solution 1

In the project root directory, you can create the .env file with EXTEND_ESLINT set to true so as to extend the ESLint config:

EXTEND_ESLINT=true

Also this also works:

EXTEND_ESLINT = "true"

Tried with create-react-app version 3.4.1, the latest version at the time of writing.

As an example, you can override the no-unused-vars rule in the package.json, as below:

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src"
  },
  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "off"
    }
  },
...

Now run the linter, e.g., npm run lint, you will not see any warning even if you have assigned a value to a variable but never used it in your application, kind of warning which you would normally see by the default settings. For example:

const App = () => {
  let myVar = 1; // Never used
  ...
}

Note: npm start and npm run build, etc., will also honour the extended rules.

---

By the way, the original package.json looks like this:

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
...

Note: Another way to configure ESLint is to remove the eslintConfig entry from the package.json file and create .eslintrc or .eslintrc.json in the project root directory as below:

{
 "extends": ["react-app"],
 "rules": {
   "no-unused-vars": "off"
 }
}

---

[Update] If you find that react-scripts is not honouring your change to the ESLint rules, it is most likely caused by the cache. It is an open issue of the project at the moment. You can manually disable the cache in node_modules/react-scripts/config/webpack.config.js like below:

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

Note that this workaround would only be for your local development. You don't need to do anything for your build pipeline most likely, as the pipeline usually builds from scratch; so there is no such cache issue out there.

Solution 2

After struggling for hours, thanks to @Yuci my eslint is finally understanding my configurations.

Instead of directly fixing the package file in node_modules/react-scripts/config/webpack.config.js, I have added npm scripts to always bust out the cache in start of npm run start and npm run build. This way you don't have to fear for 'accidentally' rebuilding the package in the future by rm -rf node_modules; npm install -- future me is not that clever.

in packages.json, change the scripts entity like the following:

  "scripts": {
    "start": "npm run clear_cache:eslint && react-scripts start",
    "build": "npm run clear_cache:eslint && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "clear_cache:eslint": "rm -rf node_modules/.cache/eslint-loader"
  },

Comments

[EnZo]

This does not work. When I run the npm run eslint command it works. But when I run npm run dev the errors still show up.

[Yuci]

@EnZo thanks for the comments. See the note in my updated answer, and it should work for npm run dev in your setup with environment variable EXTEND_ESLINT set to true.

[EnZo]

Still not working, I have the exact same configuration in the EXTEND_ESLINT=true line in my .env. And also the { "extends": ["react-app"], "rules": { "no-unused-vars": "off" } } in the package.json. Tried also as .eslintrc or .eslintrc.json

[Yuci]

Which create-react-app version do you use? @EnZo or more info about your react version, react-scripts version, etc.?

[Yuci]

@EnZo, it's about eslint cache, see my reply: github.com/facebook/create-react-app/issues/9007

[EnZo]

I just had to upgrade "react-scripts": "3.4.1". Thank you @Yuci.

[Codebling]

Please take my upvote. I was skeptical, but setting cache: false fixed it for me. Thank you

[fadehelix]

@Yuci your advice about cache flag in the node_modules/react-scripts/config/webpack.config.js solved my weird problems with custom config :D Thank you so much!

[Brian McCall]

Thank you! It was the cache thing for me also. I was stuck on this for days!