close
'React' was used before it was defined, 'React' was used before, React was used before it was defined, React was used, 'React' was used

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

by

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.

Contents
  1. How ‘React’ was used before it was defined Error Occurs ?
  2. How To Solve ‘React’ was used before it was defined Error ?
  3. Solution 1: disable the base rule
  4. Solution 2: Downgrade @typescript-eslint
  5. Solution 3: add import/resolver in Eslint
  6. Summary

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

2 thoughts on “[Solved] ‘React’ was used before it was defined”

Leave a Comment