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:
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.
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",
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
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"
}
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"
],
}
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"
That is how I resolved my problem.
cache: true, // You can set it to false
formatter: require.resolve('react-dev-utils/eslintFormatter'),
EXTEND_ESLINT=true
rules: {
"@typescript-eslint/no-use-before-define": "off"
},
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],
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.
I just wanted to add that for me, I did the following.
package.json
if they were already included in package-lock.json
by react-scripts (for me that was all of them)node_modules
folder, and package-lock.json
filenpm 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.
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.
(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
)
deleting the node_modules
folder and reinstalling it worked for me. I'm using yarn
as package manager.
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"]
}
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
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