"'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

Answer 2

Solving this error is a myth I know. But the tips listed below may help you:

Option 1: Turn off the Base Rule

You must disable the base rule as it can report incorrect errors.

"rules": {
  "no-use-before-define": "off",
  "@typescript-eslint/no-use-before-define": ["error"]
}

If this doesn't solve the problem, you might want to check more options here.

Try these and let me know if I can help more in this regard.