-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Description
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest version of the packages.
- I have read the FAQ and my problem is not listed.
Repro
This is some strange error I incur.
Create a new react app with typescript using CRA
npx create-react-app my-app --template typescript
and add @typescript-eslint/eslint-plugin and @typescript-eslint/parser
npm -i @typescript-eslint/eslint-plugin and @typescript-eslint/parser
In package.json update all the packages to the latest versions (either using ncu
or manually) and remove
"eslintConfig": {
"extends": "react-app"
}
Create a .eslintrc.js
file with the following code:
module.exports = {
parser: '@typescript-eslint/parser',
extends: ['react-app', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
},
settings: {
react: {
version: 'detect'
}
}
};
To enable react-scripts to parse this file, create a .env
file with this content:
EXTEND_ESLINT=true
And now, npm start
The app compiles and complains about some functions return types not specified. Standard stuff. The browser opens as expected and display the default page as usual for a fresh project.
And now the "curious" part. If I edit any file, for example if I remove import './index.css';
from index.tsx
file, compiler emits an error:
Failed to compile.
./src/index.tsx
Line 1:8: 'React' was used before it was defined @typescript-eslint/no-use-before-define
Search for the keywords to learn more about each error.
If i restore the old code, everything is back fine.
On issue #2502, user linonetwo suggested to add these rules (also FAQs give this hint)
'no-use-before-define': [0],
'@typescript-eslint/no-use-before-define': [1]
But with no luck for me.
I believe that ESLint version is 6.8.0 as it comes with "react-scripts": "3.4.3"
Versions
package | version |
---|---|
@typescript-eslint/parser |
4.1.0 |
TypeScript |
4.0.2 |
ESLint |
6.8.0 |
node |
14.10.1 |