Eslint error causing create-react-app failed to compile

Question

I am building a website using create-react-app and have just installed eslint to it.

For some reason what was supposed to be shown as eslint warnings are showing up as errors and causing npm run start to fail.

How can I bypass this issue and have them shown as warnings like before ?

My .eslintrc.js

  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: [
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'class-methods-use-this': 'off',
    'additional-rule': 'warn',
  },
  ignorePatterns: ['**/node_modules/*', '**/build/*', 'config-overrides.js'],
};

My package.json

  "name": "device-protection-renewal-web",
  "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",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.3",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "i18next": "^19.8.3",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-i18next": "^11.7.3",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie >= 9"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-arrow-functions": "^7.12.1",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "eslint": "^7.11.0",
    "eslint-config-airbnb-typescript": "^9.0.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.0",
    "prettier": "^2.1.2",
    "typescript": "^4.0.5"
  }
}```


  [1]: https://i.stack.imgur.com/WUKcz.png

Vinícius Cerqueira Bonifácio · Answer 1 · 2022-01-29T07:07:49.100

5

I assume that you have installed ESLint using npm install eslint --save-dev and defined a default configuration with node_modules/.bin/eslint --init answering the questions in the prompt.

I noticed that in your .eslintrc.js file, the ESLint settings is missing in the extends option:

extends: [
    'eslint:recommended',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],

Also in the package.json is recommended ESLint to have its own script that you run using npm run lint and use it combined with a eslint-plugin in your favorite code editor:

{
  "scripts": {
    "start": "react-scripts start",
    // ...
    "lint": "eslint ."
  },
}

Probably you will build your application at some point, so you should create a .eslintignore file and inside of it add build since files in the build directory also get checked by default when the command is ran.

Source: https://fullstackopen.com/en/part3/validation_and_es_lint#lint

edited Jan 29 '22 at 07:07

answered Nov 03 '20 at 08:26

Vinícius Cerqueira Bonifácio

123
1
9

1

Thanks for your reply, I have done all the above but still getting ```failed to compile``` with lots of eslint errors when running ```npm run start``` – liam Nov 03 '20 at 10:11
I am getting something like this: https://drive.google.com/file/d/15jLzUyCFOKFWK2ZqQIQlmJUteEfzIsOF/view?usp=sharing Which I think it's strange because I am used to seeing them as warnings instead of errors – liam Nov 04 '20 at 02:13
Hi again @liam. Reading the error message log you provided I found a similar problem as yours at https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined. There is a solution from Igor that seems worked for several people. Could you kindly check it out? – Vinícius Cerqueira Bonifácio Nov 04 '20 at 11:15
2

Hello again. I have tried the above solution, it got rid of the error ```'React' was used before it was defined```, but the rest of the errors still persists. I am wondering if this may be related to the ```react-scripts``` version I am using. This repo is using ```4.0.0```, and my other repo is using ```3.4.3``` with the same eslint versions and is compiling just fine. – liam Nov 05 '20 at 02:24
4

I have just downgraded my ```react-scripts``` to ```3.4.3``` and am able to compile now. I think I might stick with this version for now. – liam Nov 05 '20 at 02:28
2

faced similar situation where manually installing eslint is causing failure in compilation. Downgrading to 3.4.3 did the trick – vamshi krishna Jun 10 '21 at 13:54

theZ3r0CooL · Answer 2 · 2023-04-03T22:44:17.520

This part in your package.json is unnecessary; since you have an eslint config file, it should be moved to .eslintrc.js.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
}

Which would then turn into this:

extends: [
    'react-app',
    'react-app/jest',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
]

However; in the latest versions of the eslint-config-react-app plugin at this time (7.31.11), I'm getting a jest plugin conflict error with a project that worked prior to updating unless I remove react-app/jest from my eslint configs extends section.

Which is how I ended up here, currently trying to find out what caused this.

Update: So my issue was caused because eslint-config-react-app depends on eslint-plugin-jest^25.7.0 and I was using the latest eslint-plugin-jest^27.1.6. I removed my package.json's dependency and will use the version included with eslint-config-react-app so there aren't any conflicts there, but if I need features of the newer plugin version, a quick npm i -D on it, changing eslint configuration from automatic to manual and specifying the path to the local node_modules version and .eslintrc.js should work as well; aside from any conflicts with the config plugin.

Eslint error causing create-react-app failed to compile

2 Answers2