'React' was used before it was defined
Solution 1
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
[email protected]
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.
Solution 2
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 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"
],
}
Solution 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"
},
Solution 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"
}
Related videos on Youtube
Alexey Nazarov
Updated on February 14, 2022Comments
-
Alexey Nazarov about 2 years
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.
-
Rolly over 3 yearsdid not worked for me. "react": "^16.13.1", "typescript": "~3.7.2", "@typescript-eslint/eslint-plugin": "^4.0.1", "@typescript-eslint/parser": "^4.0.1". Same error as the post.
-
sashko over 3 yearsHave you tried deleting
node_modules
and reinstalling the packages? -
Rolly over 3 yearsi did but the warning keeps there.
-
sashko over 3 yearsIn your
package.json
specifytypescript-eslint
version without caret^
as it will install the latest minor version, not4.0.1
. -
pho3nixf1re over 3 yearsUpgrading
react-scripts
to v4.0.0 (next
as of this writing) fixes this.npm i react-scripts@next
. -
Ben Gotow over 3 yearsCan confirm that using react-scripts@next and the latest typescript-eslint deps resolves the issue
-
Mufasa over 3 yearsThis was the only thing that worked for me - thanks!
-
xdemocle over 3 yearsit's not. I tested 4.4.0 and 4.4.1
-
feihcsim over 3 yearsfor me, it wasn't just react-scripts that kept an outdated version of
@typescript-eslint
as a dependency. i found out the other culprits withyarn list @typescript-eslint/eslint-plugin @typescript-eslint/parser
-
Jose A over 3 yearsCareful on modifying it directly as it'd get overwritten by a yarn/npm install. I'd recommend to do the webpack.config.js modification through craco: github.com/gsoft-inc/craco
-
jtschoonhoven over 3 yearsSee also this recommendation from a maintainer of typescript-eslint github.com/typescript-eslint/typescript-eslint/issues/…
-
Rahul Gandhi over 3 yearsIt worked for me only after downgrading to the versions specified ( without caret obviously)
-
j0hnm4r5 over 3 yearsThis worked for me when I set these within
"resolutions"
inside mypackage.json
. -
Domagoj Vuković over 3 yearsThis saved me thanks. After doing some digging it seems like gatsby installs both of those libs with ^2.24.0 version which is super old and they get used for some reason. So frustrating that on the docs it says, just make your own .eslintrc and all good, and then they include their own parser and ruleset that gets used.
-
Little Brain about 3 yearsI had to put this in overrides: "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint/eslint-plugin"],
-
codenamezero about 3 yearsDoesn't work. I am using
@typescript-eslint
4.22. -
Praym over 2 yearsThe rules settings as mentioned above, worked for me. Turn off the first rule which is buggy and turn on the second which is works fine.
-
Ian over 2 yearsAdding just
"no-use-before-define": "off",
to my.eslintrc.json
rules did it for me. -
igor about 2 years@Praym first rule is not buggy. Original ESLint rules are valid for JS only even though many work with TS with no issues. You should switch off JS rule before using a matching TS rule. github.com/typescript-eslint/typescript-eslint/blob/main/…
-
Sacru2red almost 2 yearscheck "@typescript-eslint/eslint-plugin" at yarn.lock or package-lock.json, if other lib uses other version, sync your version