'React' was used before it was defined - reactjs

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 #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.

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

Answer 2

The bug occurs due to mismatch of #typescript-eslint versions in react-scripts and your local package.json - GitHub issue
You can downgrade the packages until react-scripts updates their version.
"#typescript-eslint/eslint-plugin": "4.0.1",
"#typescript-eslint/parser": "4.0.1",
EDIT 2020-09-14
It seems the bug is not related to react-scripts version of #typescript-eslint since multiple people reported the same bug without using react-scripts.
Anyway, the workaround remains the same - downgrade to the working version of #typescript-eslint until the fix is available.
EDIT 2020-10-24
react-scripts#4.0.0 has been published with updated #typescript-eslint. Using the newest version should solve the issue.
EDIT 2020-11-04
If after upgrading the packages the error is still there, most probably your eslint config uses the wrong rule. Check out Igor's answer to fix it.

Answer 3

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 4

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

Answer 5

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

Answer 6

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 7

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.

Answer 8

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

Answer 9

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.

Answer 10

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"

Answer 11

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 12

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 react-scripts#4.0.3
// Get latest version:
npm uninstall react-scripts
npm install react-scripts

Answer 13

(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)

Answer 14

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

Answer 15

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.

Answer 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)

Answer 17

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