''React' was used before it was defined

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  @typescript-eslint/no-use-before-define

Code in my component starts with:

import React from "react";

Eslint settings:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/triple-slash-reference": 0,
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off"
  },
};

Some part of package.json:

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.1.0",
  "@typescript-eslint/parser": "^4.1.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.6.0",
  "eslint-config-airbnb": "^18.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-react": "^7.20.0",
  "prettier": "^2.0.5",
  "start-server-and-test": "^1.11.3"
},
"dependencies": {
  ...
  "react-scripts": "3.4.3",
  ...
}

I tried:

Read https://github.com/typescript-eslint/typescript-eslint/issues/2502
Disable @typescript-eslint/no-use-before-define and no-use-before-define in .eslintrc.js
Actually I tried to delete .eslintrc.js at all, but had the same error.

Solution 1:^[1]

From the official documentation.

"rules": {
  // note you must disable the base rule as it can report incorrect errors
  "no-use-before-define": "off",
  "@typescript-eslint/no-use-before-define": ["error"]
}

Solution 2:^[2]

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

Solution 3:^[3]

That is how I resolved my problem.

First of all, go to the node_modules/react-scripts/config/webpack.config.js and change cache to false, because this will help you to understand what works and what is not then you changing eslint file. I found it here

 cache: true, // You can set it to false
 formatter: require.resolve('react-dev-utils/eslintFormatter'),

Add ENV varialbe to .env file. More info

 EXTEND_ESLINT=true

From now CRA will have to use your local eslint for linting during your build and we have control to disable some rules, in my case in .eslintrc:

rules: {
    "@typescript-eslint/no-use-before-define": "off"
},

Solution 4:^[4]

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

Solution 5:^[5]

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

Solution 6:^[6]

I got this error from the airbnb-base ruleset in a typescript project. Also extending airbnb-typescript (that has the correct rules for typescript) resolved the issue.

Solution 7:^[7]

This has been resolved in 4.4.0. Upgrade these dependencies to version 4.4.0

Update: This may work for some use cases. This resolved my issue.

"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",

Solution 8:^[8]

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

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)
Deleted my node_modules folder, and package-lock.json file
Ran 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.

Solution 9:^[9]

Try adding import/resolver to your Eslint settings:

  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  }

Maybe you will need to install it too:

$ yarn add -D eslint-import-resolver-typescript

If that doesn't work, you could change this rule

"@typescript-eslint/no-use-before-define": "off"

like this:

"no-use-before-define": "off"

Solution 10:^[10]

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

Solution 11:^[11]

If you use Create React App. Getting the latest version of react-scripts fixed this issue for me. Currently: 4.0.3

// Get this specific version:
npm uninstall react-scripts
npm install [email protected]

// Get latest version:
npm uninstall react-scripts
npm install react-scripts

Solution 12:^[12]

(not enough rep to comment)

@sashko's workaround seems to work - deleting node_modules was necessary as well.

One thing I missed was the caret in "^4.0.1". The version needs to be fixed without the caret ^, which seems to be the issue that @Rolly is having. Make sure it's 4.0.1.

Only a workaround until react-scripts updates to v4 (I'm using create-react-app)

Solution 13:^[13]

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

Solution 14:^[14]

I deleted packages @typescript-eslint/eslint-plugin and @typescript-eslint/parser from my package.json, deleted node_modules and package-lock.json, reinstalled packages: npm install The error disappeared.

UPDATE

After that create-react-app uses their own @typescript-eslint/eslint-plugin module which is deprecated.

Solution 15:^[15]

I know that this post does not solve the issue directly, but you can bypass this issue if you stick to best practices regarding imports. Try to import exactly what you want, and you will get rid of this error also. For example:

import { useState, useEffect } from React;
// and then continue with your code

Solution 16:^[16]

This Answer worked for me in a react-native project(airbnb style guide)

Extend your rules with airbnb-typescript inside the .eslintrc.json

"extends": {
  "airbnb-typescript"
}

Press ctrl+shift+p or cmd+shift+p >Reload window (or simply close and re-open vscode)

Solution 17:^[17]

Try using Yarn instead of NPM (make sure to remove your node_modules in between).

This worked for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	igor
Solution 2	Raine Revere
Solution 3	Alexey Nazarov
Solution 4	j0hnm4r5
Solution 5	Bnaya
Solution 6
Solution 7
Solution 8	maxshuty
Solution 9	Rodrigo Avellar
Solution 10	Jean Poffo
Solution 11	MapMyMind
Solution 12	jmaio
Solution 13	Presh Onyee
Solution 14
Solution 15	prieston
Solution 16	Nivethan
Solution 17	antoine129

''React' was used before it was defined

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]