HiveBrain v1.2.0
Get Started
← Back to all entries
snippettypescriptreactCritical

'React' was used before it was defined

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
useddefinedreactbeforewas

Problem

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.

Solution

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.

Context

Stack Overflow Q#63818415, score: 115

Revisions (0)

No revisions yet.