'React' was used before it was defined

Question

I am working with create-react-app + typescript + eslint application and during build have such error:

Line 1:8:  \'React\' was used before it was defined  @t         


        

Answer 1

If you are only getting this error for .js files, make sure @typescript-eslint/parser is being used exclusively on Typescript files.

.eslintrc.json (abbreviated)

{
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": ["@typescript-eslint"],
      "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
      },
    }
  ],
  // WRONG: Do not use @typescript-eslint/parser on JS files
  // "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    // "@typescript-eslint"
  ],
}

Answer 2

My fix for that: Use eslint 6 as react-scripts is using Force react scripts to use newer @typescript-eslint packages as the rest of the repo. I'm using selective resolution here

  "resolutions": {
    "**/react-scripts/**/@typescript-eslint/eslint-plugin": "^4.4.1",
    "**/react-scripts/**/@typescript-eslint/parser": "^4.4.1"
  }

@typescript-eslint 4.x does still support es6

Answer 3

Not enough credit to comment.

@sashko thank you for your answers.

I just wanted to add that for me, I did the following.

1. Removed all eslint related dependencies from package.json if they were already included in package-lock.json by react-scripts (for me that was all of them)
2. Deleted my node_modules folder, and package-lock.json file
3. npm install

After completing those steps I finally got that error to go away. I prefer removing the dependencies to downgrading them since this will help avoid the same issue happening again in the future.

Answer 4

It is an issue present in ESLINT.

The way I resolve is to add the following lines to the ESLINT/rules:

"no-use-before-define": [0],
"@ typescript-eslint / no-use-before-define": [1],

Answer 5

deleting the node_modules folder and reinstalling it worked for me. I'm using yarn as package manager.

Answer 6

I landed on this page after I started getting issues with a Gatsby project that was using Typescript and an ESLint config that extended eslint-config-airbnb-typescript. In addition to OP's error, ESLint was also giving errors on various rules not being defined, like Definition for rule '@typescript-eslint/no-redeclare' was not found. and a few others.

The underlying problem ended up being that Gatsby was using fairly old versions of both @typescript-eslint/eslint-plugin and @typescript-eslint/parser. Forcing yarn to install only up-to-date versions solved the issue:

// package.json
"resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0"
}