My create-react-app is failing to compile due to ESLint error

Question

I just created a fresh template with create-react-app with react v17 included, and I installed eslint dependencies as I used to before, here's my package.json file

{
  "name": "gym-nation",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.8.6",
    "react-redux": "^7.2.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.12.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "node-sass": "^4.14.1",
    "prettier": "^2.1.2",
    "react-app-rewired": "^2.1.6"
  }
}

and here's my eslintrc.json: (note that i didn't add all the rules yet)

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["react-app", "prettier"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 140,
        "singleQuote": true,
        "editor.formatOnSave": true,
        "arrowParens": "always",
        "jsxSingleQuote": true,
        "tabWidth": 2,
        "trailingComma": "none"
      }
    ],
    "no-unused-vars": "error"
  }
}

when I run the app will fail to compile due to this error:

Line 113:13:  'isLoading' is assigned a value but never used  no-unused-vars

I've worked on previous projects and eslint errors were showing in the code without causing the app to crash. can anyone point where I messed up please?

Answer 1

The developers around react-scripts decided to turn warnings into errors once CI=true is present. Therefore the only way to fix that is using CI=false for your command or make your eslint run warning free. There is no point to suggest eslint rules here cause yet another warning caused by your codebase or custom ruleset might trigger that issue.

Adjust your scripts block in package.json:

"scripts": {
  "start": "CI=false react-app-rewired start",
  "build": "CI=false react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

Or run it that way:

CI=false npm run start

CI=false npm run build

See related issues on GitHub:

https://github.com/facebook/create-react-app/issues/10062

https://github.com/facebook/create-react-app/issues/9887

Answer 2

This Compiled with problems can also solved to add this in the .env file. I face the problem and try to solve it using this line of code.

SKIP_PREFLIGHT_CHECK=true

or

ESLINT_NO_DEV_ERRORS=true

SKIP_PREFLIGHT_CHECK=true or ESLINT_NO_DEV_ERRORS=true

---

or you can also edit package.json.

"start": "ESLINT_NO_DEV_ERRORS='true'  react-scripts start",  
"build": "DISABLE_ESLINT_PLUGIN='true' react-scripts build",

Answer 3

Replace the third last line in your .eslintrc.json file

"no-unused-vars": "error"

with

"no-unused-vars": "warn"

I expect that change to result in a warning instead of an error.

Don't forget to restart your text editor or IDE!

Disclaimer
From what I can read in your question, I believe my tip should help. But I haven't tried it myself.

Answer 4

For Next.js

Open next.config.js and enable the ignoreDuringBuilds option in the eslint config:

module.exports = {
  eslint: {
    ignoreDuringBuilds: true
  }
}

Answer 5

I had this same error and here is what worked for me.

Along with the error I got the following suggestions in the terminal when I wanted to create an app.

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

I did all 3 above. Then I did the following-

I uninstalled eslint
npm uninstall -g create-react-app //uninstall create react app
npm install eslint --save-dev //reinstalled eslint
npm install -g yarn //installed yarn because I was using npm
used yarn to install create react app
yarn create-react-app nameofapp //used yarn to create a new app

when I did npm start, it worked as it seems like yarn was working to patch up/work through the problems.

I had to do a bit of trial and error here but finally it worked. I am no expert so did not really understand what exactly happened under the hood but this worked for me as yarn took care of the eslint problem.

Answer 6

I was able to fix it using env variables, since I'm not using webpack.

Make sure you're using the VSCode extension and that you installed eslint as a dev-dependency (as well as any other plugins you might need).

To get your code to lint, but not fail, in development, add this to your .env.development: ESLINT_NO_DEV_ERRORS=true

To completely disable eslint on a production build, add this to your .env.production: DISABLE_ESLINT_PLUGIN=true

After that, it should not fail any build. I don't understand why eslint should fail builds. It's there to help us keep code quality up, but not necessarily enforce it.

Answer 7

I have had the exact same errors when I created app using the create-react-app and setup the eslint for the application.

The eslint errors were showing up in the browser rather than in the console.

Once, I debugged all the dependencies. It seems that the react-scripts was causing the lint errors for me.

The newest version of the react-scripts:"4.0.0" may have some breaking changes which could be causing the eslint to throw the errors in the browser.

Solution:

This issue has been fixed in the react-scipts:"4.0.3" but, the eslint errors present in the project are not converted to warnings by default. You have to create an .env file which should contain a ESLINT_NO_DEV_ERRORS=true flag. Due to this flag, you will receive the eslint errors as warnings and not as errors in the development.

This flag is ignored during production and when they are any git hooks running, which will in turn cause an error when you are trying to commit the code with an eslint error in it.

Update 2:

Active Issue: https://github.com/facebook/create-react-app/issues/9887

Workaround for this issue until react-scripts:4.0.2 is released:

• Install patch-package and postinstall-postinstall as dev dependency .

• Go to node_modules/react-scripts/config/webpack.config.js and make the following changes

• Once done with the edit,run yarn patch-package react-scripts. This will create a patches folder, with the dependency patch in it.

• Now, as we don't want do this every time while installing the dependencies. We are going to add another script to our package.json file.

  "postinstall":"patch-package".

This above script will run every time when we install the dependencies. Just keep in mind that you will also have to push packages folder to your repo. If you need the changes, also while deploying the app.

Thanks to @fernandaad for providing this workaround.

Update 1:

Had to downgrade to react-scripts:3.4.4 version because there is no workaround available right now. Now, errors were being thrown in the console rather than in the browser.

1. Delete the node_modules and package.lock/yarn.lock.
2. Downgrade react-scripts from 4.0.0 to 3.4.4.
3. Install the dependencies and start the app.

Answer 8

I had a same problem

this problem have a open issue in CRA (version 4.0) on github

I found a temporary solution for this

1. delete node_modules
2. change React-Scripts version form 4.0.0 to 3.4.4
3. add this SKIP_PREFLIGHT_CHECK=true into .env file
4. run npm install
5. hope enjoy :)

PS : if .env file dose not exist on your project you can create that in root folder

Answer 9

it took me some hours to find possible solutions:

1- workaround: add rules inside the package.json file

  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "max-len": "warn"
        }
      }
    ]
  },

2- you can use a .eslintrc.js file, by adding .env file in the root folder with following content:

DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true

• DISABLE_ESLINT_PLUGIN- will disable eslint-webpack-plugin in the Development and Production. - this is a must.

• ESLINT_NO_DEV_ERRORS - will convert ESLint errors to warnings during development. As a result, ESLint output will no longer appear in the error overlay. this alone won't fix the bug.

see also documentation here and here

Answer 10

For a temporary workaround, use .eslintrc.js so that you can check your current node environment and set rules accordingly. E.g:

const isProd = process.env.NODE_ENV === 'production';
const warnDevErrorProd = isProd ? 2 : 1;

{
  ...
  "rules": {
    ...
    "prettier/prettier": warnDevErrorProd,
    "no-console": warnDevErrorProd,
    ...
  }
  ...
}

This way you don't need to eject in order to modify your webpack config to change the rules there.

Answer 11

in module.rules modify following rule to have

failOnError: false,
emitWarning: true,

{
          test: /\.(js|mjs|jsx)$/,
          enforce: 'pre',
          use: [
            {
              options: {
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                failOnError: false,
                emitWarning: true,
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: paths.appSrc,
        }

Answer 12

You can add two properties to ESLintPlugin method, inside node_modules\react-scripts\config\webpack.config.js for your project.

failOnError: false, emitWarning: true,

 new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        cache: true,
        failOnError: false,
        emitWarning: true,
        // ESLint class options
        cwd: paths.appPath,

Answer 13

When I upgraded my create-react-app to v4, it was intimidating to see pages of eslint issues -> errors preventing my app from compiling. Not the immediate experience I was expecting using react's fast-refresh :). The change in rules (and error levels), in Eslint 7 are surely the cause. Although, how the transpiling process started to care about prettier/prettier issues that were previously limited to my linter, remains unclear to me.

Update

There are a few things going on. The Eslint changes (and any extensions such as airbnb) are likely shaking up my mix of errors and warnings, but likely most relevant: CRA v4 no longer uses its own eslint rules, but rather that of the project, i.e., the linting rules used in my editor. Prior to the upgrade, CRA's use of the project rules was enabled using EXTEND_ESLINT. This register is now on by default and no longer something I can set with env in v4 (in my experience anyway).

Regardless, the quick-fix to get the app to transpile was as follows:

1. git commit my latest changes
2. run prettier cli: yarn prettier --config ./.prettierrc --write '**/*.{js|jsx}'
3. one by one, created a new entry in my .eslintrc to set the blocking error to 'warn'; e.g., added 'no-param-reassign': 'warn' (something I often do in my .reduce routines).

All in all, the process took me about 5 min.

This got me to a place where I could compile the app whilst giving me time to work through/prioritize what makes sense in this fast-refresh, non-ejected CRA, Eslint v7 version of the app.

- E

Answer 14

since eslint-loader is now deprecated and eslint-webpack-plugin is now used in create-react-app check the docs, I was able to solve a the issue by adding two options to the eslint-webpack-plugin

after ejecting your react app, add these options to the ESLintPlugin options:

      new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false,  <== `This one`
        emitWarning: true,  <== `And this one`
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime && {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })