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

Answer 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, eg, 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.

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

Answer 3

a short answer is to just inline in the script command like

{
  "scripts": {
    "start": "EXTEND_ESLINT=true react-scripts start"
  }
}

but this is less than ideal since you'd have to add EXTEND_ESLINT=true to all the other react-script commands as well