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