'React' was used before it was defined

Question

I am working with create-react-app + typescript + eslint application and during build have such error:

Line 1:8:  \'React\' was used before it was defined  @t         


        

Answer 1

(not enough rep to comment)

@sashko's workaround seems to work - deleting node_modules was necessary as well.

One thing I missed was the caret in "^4.0.1". The version needs to be fixed without the caret ^, which seems to be the issue that @Rolly is having. Make sure it's 4.0.1.

Only a workaround until react-scripts updates to v4 (I'm using create-react-app)

Answer 2

Try using Yarn instead of NPM (make sure to remove your node_modules in between).

This worked for me.

Answer 3

From the official documentation.

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

Answer 4

The bug occurs due to mismatch of @typescript-eslint versions in react-scripts and your local package.json - GitHub issue

You can downgrade the packages until react-scripts updates their version.

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

EDIT 14/09/2020

It seems the bug is not related to react-scripts version of @typescript-eslint since multiple people reported the same bug without using react-scripts.

Anyway, the workaround remains the same - downgrade to the working version of @typescript-eslint until the fix is available.

EDIT 24/10/2020

react-scripts@4.0.0 has been published with updated @typescript-eslint. Using the newest version should solve the issue.

EDIT 04/11/2020

If after upgrading the packages the error is still there, most probably your eslint config uses the wrong rule. Check out Igor's answer to fix it.

Answer 5

That is how I resolved my problem.

1. First of all, go to the node_modules/react-scripts/config/webpack.config.js and change cache to false, because this will help you to understand what works and what is not then you changing eslint file. I found it here

 cache: true, // You can set it to false
 formatter: require.resolve('react-dev-utils/eslintFormatter'),

2. Add ENV varialbe to .env file. More info

 EXTEND_ESLINT=true

3. From now CRA will have to use your local eslint for linting during your build and we have control to disable some rules, in my case in .eslintrc:

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

Answer 6

Try adding import/resolver to your Eslint settings:

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

Maybe you will need to install it too:

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