close

[Solved] ‘React’ was used before it was defined

Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to import React from “react” But I am facing following error ‘React’ was used before it was defined in Reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How ‘React’ was used before it was defined Error Occurs ?

I am trying to import React from “react” But I am facing following error.

'React' was used before it was defined

How To Solve ‘React’ was used before it was defined Error ?

  1. How To Solve 'React' was used before it was defined Error ?

    To Solve 'React' was used before it was defined Error You Need to disable the base rule Just like this. Second Solution is Just try to downgrade @typescript-eslint to 4.0.1. Now, Your problem must be solved.

  2. 'React' was used before it was defined

    To Solve 'React' was used before it was defined Error Just add import/resolver in Eslint setting And Install eslint-import-resolver-typescript if needed: yarn add -D eslint-import-resolver-typescript If that doesn't work, you could change this rule “@typescript-eslint/no-use-before-define”: “off” Now, Your problem Maybe solved.

Solution 1: disable the base rule

You Need to disable the base rule Just like this.

"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"]
}

Now, Your error must be solved.

Solution 2: Downgrade @typescript-eslint

Just try to downgrade @typescript-eslint to 4.0.1.

"@typescript-eslint/eslint-plugin": "4.0.1",
"@typescript-eslint/parser": "4.0.1",

Now, Your problem must be solved.

Solution 3: add import/resolver in Eslint

Just add import/resolver in Eslint setting.

  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  }

And Install eslint-import-resolver-typescript if needed.

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"

Now, Your problem Maybe solved.

Summary

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

Please Rate Our Solution to Motivate Us For Give Our Best

Leave a Comment