“'React' was used before it was defined.” eslint warning

Question

Similar question to this post on StackOverflow but I cannot seem to get rid of this warning after trying everything I could find on the internet. Github Issue.

 Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

I've tried adding these to the rules in .eslintrc.json but neither seem to remove the warning.

 "no-use-before-define": "off",
 "@typescript-eslint/no-use-before-define": "off"

 "no-use-before-define": [0],
 "@typescript-eslint/no-use-before-define": [1]

This issue doesn't exist on my other projects. I've tried copying package.json and .eslintrc.json from the other projects and re-installing node_modules , however it still persists.

Does anyone have any other suggestions to resolve the warning? Thanks in advance!

Answer 1

that is because:

This is a pretty common thing because TypeScript adds new features that ESLint doesn't know about. The first step is to check our list of "extension" rules here. An extension rule is simply a rule which extends the base ESLint rules to support TypeScript syntax. If you find it in there, give it a go to see if it works for you. You can configure it by disabling the base rule, and turning on the extension rule.

So pls try to write that rules in your .eslintrc.json :

   'no-use-before-define': 'off',
   '@typescript-eslint/no-use-before-define': ['error'],

related link:

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md

https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code