'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  @typescript-eslint/no-use-before-define

Code in my component starts with:

import React from "react";

Eslint settings:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/triple-slash-reference": 0,
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off"
  },
};

Some part of package.json:

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.1.0",
  "@typescript-eslint/parser": "^4.1.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.6.0",
  "eslint-config-airbnb": "^18.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-react": "^7.20.0",
  "prettier": "^2.0.5",
  "start-server-and-test": "^1.11.3"
},
"dependencies": {
  ...
  "react-scripts": "3.4.3",
  ...
}

I tried:

Read https://github.com/typescript-eslint/typescript-eslint/issues/2502
Disable @typescript-eslint/no-use-before-define and no-use-before-define in .eslintrc.js
Actually I tried to delete .eslintrc.js at all, but had the same error.

igor · Answer 1 · 2022-11-09T12:35:48.940

319

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

edited Nov 09 '22 at 12:35

answered Sep 23 '20 at 09:26

igor

5,351
2
26
22

7

See also this recommendation from a maintainer of typescript-eslint https://github.com/typescript-eslint/typescript-eslint/issues/2540#issuecomment-692505191 – jtschoonhoven Oct 27 '20 at 21:09
2

Doesn't work. I am using `@typescript-eslint` 4.22. – codenamezero Apr 16 '21 at 15:09
The rules settings as mentioned above, worked for me. Turn off the first rule which is buggy and turn on the second which is works fine. – Praym Dec 23 '21 at 22:58
1

Adding just `"no-use-before-define": "off",` to my `.eslintrc.json` rules did it for me. – Ian Dec 30 '21 at 05:03
@Praym first rule is not buggy. *Original* ESLint rules are valid for JS only even though many work with TS with no issues. You should switch off JS rule before using a **matching** TS rule. https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/README.md#supported-rules – igor May 02 '22 at 17:05

score 115 · Accepted Answer · edited Apr 06 '21 at 17:43

115

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 2020-09-14

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 2020-10-24

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

EDIT 2020-11-04

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.

edited Apr 06 '21 at 17:43

Eric Majerus

1,099
1
12
23

answered Sep 12 '20 at 16:39

sashko

1,632
1
13
20

4

did not worked for me. "react": "^16.13.1", "typescript": "~3.7.2", "@typescript-eslint/eslint-plugin": "^4.0.1", "@typescript-eslint/parser": "^4.0.1". Same error as the post. – Rolly Sep 23 '20 at 15:23
2

Have you tried deleting `node_modules` and reinstalling the packages? – sashko Sep 23 '20 at 16:03
i did but the warning keeps there. – Rolly Sep 24 '20 at 15:28
3

In your `package.json` specify `typescript-eslint` version without caret `^` as it will install the latest minor version, not `4.0.1`. – sashko Sep 24 '20 at 16:55
Upgrading `react-scripts` to v4.0.0 (`next` as of this writing) fixes this. `npm i react-scripts@next`. – pho3nixf1re Sep 29 '20 at 17:41
Can confirm that using react-scripts@next and the latest typescript-eslint deps resolves the issue – Ben Gotow Sep 30 '20 at 13:08
It worked for me only after downgrading to the versions specified ( without caret obviously) – Rahul Gandhi Nov 02 '20 at 16:45
check "@typescript-eslint/eslint-plugin" at yarn.lock or package-lock.json, if other lib uses other version, sync your version – Sacru2red Jun 30 '22 at 02:08

score 14 · Answer 3 · answered Dec 05 '20 at 16:19

If you are only getting this error for .js files, make sure @typescript-eslint/parser is being used exclusively on Typescript files.

.eslintrc.json (abbreviated)

{
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": ["@typescript-eslint"],
      "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
      },
    }
  ],
  // WRONG: Do not use @typescript-eslint/parser on JS files
  // "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    // "@typescript-eslint"
  ],
}

I had to put this in overrides: "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint/eslint-plugin"], — Little Brain, Apr 06 '21 at 16:30

score 10 · Answer 4 · answered Sep 10 '20 at 13:13

That is how I resolved my problem.

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'),

Add ENV varialbe to .env file. More info

 EXTEND_ESLINT=true

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

Careful on modifying it directly as it'd get overwritten by a yarn/npm install. I'd recommend to do the webpack.config.js modification through craco: https://github.com/gsoft-inc/craco — Jose A, Oct 20 '20 at 12:30

score 7 · Answer 5 · answered Nov 10 '20 at 19:02

I landed on this page after I started getting issues with a Gatsby project that was using Typescript and an ESLint config that extended eslint-config-airbnb-typescript. In addition to OP's error, ESLint was also giving errors on various rules not being defined, like Definition for rule '@typescript-eslint/no-redeclare' was not found. and a few others.

The underlying problem ended up being that Gatsby was using fairly old versions of both @typescript-eslint/eslint-plugin and @typescript-eslint/parser. Forcing yarn to install only up-to-date versions solved the issue:

// package.json
"resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0"
}

This saved me thanks. After doing some digging it seems like gatsby installs both of those libs with ^2.24.0 version which is super old and they get used for some reason. So frustrating that on the docs it says, just make your own .eslintrc and all good, and then they include their own parser and ruleset that gets used. — Domagoj Vuković, Jan 29 '21 at 23:33

thisismydesign · Answer 6 · 2021-07-12T08:50:11.187

5

I got this error from the airbnb-base ruleset in a typescript project. Also extending airbnb-typescript (that has the correct rules for typescript) resolved the issue.

edited Jul 12 '21 at 08:50

answered Feb 04 '21 at 15:13

thisismydesign

21,553
9
123
126

score 4 · Answer 7 · answered Oct 13 '20 at 20:04

4

My fix for that: Use eslint 6 as react-scripts is using Force react scripts to use newer @typescript-eslint packages as the rest of the repo. I'm using selective resolution here

  "resolutions": {
    "**/react-scripts/**/@typescript-eslint/eslint-plugin": "^4.4.1",
    "**/react-scripts/**/@typescript-eslint/parser": "^4.4.1"
  }

@typescript-eslint 4.x does still support es6

answered Oct 13 '20 at 20:04

Bnaya

765
6
15

for me, it wasn't just react-scripts that kept an outdated version of `@typescript-eslint` as a dependency. i found out the other culprits with `yarn list @typescript-eslint/eslint-plugin @typescript-eslint/parser` – feihcsim Oct 19 '20 at 06:10

score 3 · Answer 8 · edited Feb 13 '22 at 13:31

3

I just wanted to add that for me, I did the following.

Removed all eslint related dependencies from package.json if they were already included in package-lock.json by react-scripts (for me that was all of them)
Deleted my node_modules folder, and package-lock.json file
Ran npm install

After completing those steps I finally got that error to go away. I prefer removing the dependencies to downgrading them since this will help avoid the same issue happening again in the future.

edited Feb 13 '22 at 13:31

maxshuty

9,708
13
64
77

answered Sep 29 '20 at 02:28

St John

431
4
5

This was the only thing that worked for me - thanks! – Mufasa Oct 06 '20 at 10:53

etoxin · Answer 9 · 2020-10-21T00:37:06.400

3

This has been resolved in 4.4.0. Upgrade these dependencies to version 4.4.0

Update: This may work for some use cases. This resolved my issue.

"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",

edited Oct 21 '20 at 00:37

answered Oct 12 '20 at 04:07

etoxin

4,908
3
38
50

1

it's not. I tested 4.4.0 and 4.4.1 – xdemocle Oct 15 '20 at 11:18
1

This worked for me when I set these within `"resolutions"` inside my `package.json`. – j0hnm4r5 Nov 10 '20 at 19:03

score 2 · Answer 10 · answered Sep 10 '20 at 02:48

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"

score 1 · Answer 11 · answered Sep 11 '20 at 14:52

1

It is an issue present in ESLINT.

The way I resolve is to add the following lines to the ESLINT/rules:

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

answered Sep 11 '20 at 14:52

Jean Poffo

19
4

score 1 · Answer 12 · answered Mar 02 '21 at 13:49

If you use Create React App. Getting the latest version of react-scripts fixed this issue for me. Currently: 4.0.3

// Get this specific version:
npm uninstall react-scripts
npm install react-scripts@4.0.3

// Get latest version:
npm uninstall react-scripts
npm install react-scripts

score 0 · Answer 13 · answered Sep 24 '20 at 12:50

(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)

score 0 · Answer 14 · answered Sep 25 '20 at 05:49

0

deleting the node_modules folder and reinstalling it worked for me. I'm using yarn as package manager.

answered Sep 25 '20 at 05:49

Presh Onyee

29
4

Eugene · Answer 15 · 2020-10-22T09:29:17.200

0

I deleted packages @typescript-eslint/eslint-plugin and @typescript-eslint/parser from my package.json, deleted node_modules and package-lock.json, reinstalled packages: npm install The error disappeared.

UPDATE

After that create-react-app uses their own @typescript-eslint/eslint-plugin module which is deprecated.

edited Oct 22 '20 at 09:29

answered Oct 22 '20 at 08:44

Eugene

45
6

score 0 · Answer 16 · answered May 15 '22 at 19:38

This Answer worked for me in a react-native project(airbnb style guide)

Extend your rules with airbnb-typescript inside the .eslintrc.json

"extends": {
  "airbnb-typescript"
}

Press ctrl+shift+p or cmd+shift+p >Reload window (or simply close and re-open vscode)

score -3 · Answer 17 · answered Sep 16 '20 at 13:32

-3

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

This worked for me.

answered Sep 16 '20 at 13:32

Antoine

5,504
5
33
54

'React' was used before it was defined

17 Answers17

This Answer worked for me in a react-native project(airbnb style guide)

Linked