[no-use-before-define] 'React' was used before it was defined on edited code

[artecoop]

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

Repro

This is some strange error I incur.
Create a new react app with typescript using CRA

npx create-react-app my-app --template typescript

and add @typescript-eslint/eslint-plugin and @typescript-eslint/parser

npm -i @typescript-eslint/eslint-plugin and @typescript-eslint/parser

In package.json update all the packages to the latest versions (either using ncu or manually) and remove

 "eslintConfig": {
    "extends": "react-app"
  }

Create a .eslintrc.js file with the following code:

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: ['react-app', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        }
    },
    rules: {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    },
    settings: {
        react: {
            version: 'detect'
        }
    }
};

To enable react-scripts to parse this file, create a .env file with this content:

EXTEND_ESLINT=true

And now, npm start

The app compiles and complains about some functions return types not specified. Standard stuff. The browser opens as expected and display the default page as usual for a fresh project.

And now the "curious" part. If I edit any file, for example if I remove import './index.css'; from index.tsx file, compiler emits an error:

Failed to compile.

./src/index.tsx
  Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

Search for the keywords to learn more about each error.

If i restore the old code, everything is back fine.

On issue #2502, user linonetwo suggested to add these rules (also FAQs give this hint)

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

But with no luck for me.

I believe that ESLint version is 6.8.0 as it comes with "react-scripts": "3.4.3"

Versions

package	version
@typescript-eslint/parser	4.1.0
TypeScript	4.0.2
ESLint	6.8.0
node	14.10.1

[bradzacher]

React scripts does not use the latest versions of our packages yet, so likely your lint is using the wrong versions.

[bradzacher]

To anybody responding here.
Commenting to confirm the problem is just spam. Commenting with +1 is just spam.

Neither comments help us diagnose the problem.

Please, please, please include relevant information.
Either dump all your configs in a comment or create a repro repo.

HELP ME TO HELP YOU

(Note that including the versions from your package.json is not going to help because you can have multiple versions installed.)

As it stands right now. I cannot repro this against master.

That means that either:

• There is a very specific circumstance that this occurs (I.e. Combination of packages)
  • A repro repo is the best way to show us that exact circumstance.
• Your config is incorrect.
  • Dumping your configs will let us help you.
• Your package versions are incorrect
  • Most likely cause.
  • You'll likely diagnose this as part of creating a repro repo.
  • Check your yarn.lock or your package-lock.json and search for instances of our packages. If you've got more than 1 version of our parser or plugin, then that is likely causing your problem.

---

I'll say again here:
If you are using a package like creat-react-app - then you just have to wait patiently. They have a dependency on a specific version of our tooling, which means you are stuck on an old version until they bump the range.

[lxsmnsyc]

My own config complains the same linter error:

To add context, the image above is from a TSX file with element declarations: https://github.com/LXSMNSYC/scoped-model/blob/master/packages/react-scoped-model/src/create-model.tsx

Interestingly, function types complains about no-unused-vars:

Edit:

Regardless, nothing changes if I add or remove these rules:

    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],

Edit 2:
I have cleaned my yarn.lock, no-use-before-define still persists

[hb0]

To reproduce the issue, see this sample app.

Reproduction steps, see this workfow:

• npm install
• npm run build
• does not occur using yarn

Error, see this CI build:

Failed to compile.
./src/index.tsx
  Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

Hope this helps, even if this sample app uses react-create-app.

[bradzacher]

You need to wait for 3rd party tool with dependencies on our tooling to upgrade

@lxsmnsyc - your example repo uses tsdx, which has a dependency on an old version of our tooling:

https://github.com/LXSMNSYC/scoped-model/blob/master/yarn.lock#L9749-L9750

---

@hb0 - your example repo uses react-scripts, which has a dependency on an old version of our tooling:

https://github.com/hb0/typescript-eslint_issue-2540/blob/master/package-lock.json#L11661-L11682

It coordinates the lint run during the webpack run, and as such it uses its dependencies, not the root dependencies.

---

As I mentioned earlier - if you're running into this issue, please check your yarn.lock or package-lock.json. Search for our packages (@typescript-eslint/parser and @typescript-eslint/eslint-plugin)

If you find an entry in your file that is less than 4.0.0 then that is the cause of your problems.

[lxsmnsyc]

@bradzacher I'm currently working on a cleanup where I am removing TSDX in favor of my own setup. The problem still persists.

[bradzacher]

We have passing tests for this exact case in master, which is why I believe that this is due to incorrect package versions locally in your projects.

typescript-eslint/packages/eslint-plugin/tests/rules/no-use-before-define.test.ts

Lines 294 to 345 in f785965

	{
	code: `
	import * as React from 'react';
	<div />;
	`,
	parserOptions: {
	sourceType: 'module',
	ecmaFeatures: {
	jsx: true,
	},
	},
	},
	{
	code: `
	import React from 'react';
	<div />;
	`,
	parserOptions: {
	sourceType: 'module',
	ecmaFeatures: {
	jsx: true,
	},
	},
	},
	{
	code: `
	import { h } from 'preact';
	<div />;
	`,
	parserOptions: {
	sourceType: 'module',
	jsxPragma: 'h',
	ecmaFeatures: {
	jsx: true,
	},
	},
	},
	{
	code: `
	const React = require('react');
	<div />;
	`,
	parserOptions: {
	ecmaFeatures: {
	jsx: true,
	},
	},
	},

If someone can create an isolated repro with just our packages, then I am happy to dig more into this. Without that - there's only so much I can do to look into here.

[a-heryani]

If someone can create an isolated repro with just our packages, then I am happy to dig more into this. Without that - there's only so much I can do to look into here.

I have removed everything unrelated to eslint in this example repo.

Look in the App.tsx for the two errors.

ESLint: 'React' was used before it was defined.(no-use-before-define)
ESLint: 'JSX' is not defined.(no-undef)

https://github.com/a-heryani/typescript-eslint-test

[bradzacher]

https://github.com/a-heryani/typescript-eslint-test/blob/master/.eslintrc#L3

You extend airbnb, which turns on no-use-before-define.

Your config never turns it off, nor does it turn on our version of the rule (@typescript-eslint/no-use-before-define)

This is listed in the FAQ: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code

---

For the no-undef report.

This is not a false positive. JSX is a 3rd party global type (defined in @types/react).

See the docs on no-undef for information about defining globals.

https://eslint.org/docs/rules/no-undef#rule-details

Also listed in the FAQ: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors

[a-heryani]

https://github.com/a-heryani/typescript-eslint-test/blob/master/.eslintrc#L3

You extend airbnb, which turns on no-use-before-define.

Your config never turns it off, nor does it turn on our version of the rule (@typescript-eslint/no-use-before-define)

This is listed in the FAQ: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code

Thanks @bradzacher. I can confirm that following works.

For the no-undef report.

This is not a false positive. JSX is a 3rd party global type (defined in @types/react).

Got it. I pruned @types/react when I was cleaning package.json for the repo. Thanks.

[farcaller]

I believe this was fixed in react-scripts now: facebook/create-react-app#9434

[bradzacher]

Yup - thanks for linking it. Once it's released, users will be able to upgrade and they will no longer have old versions of our packages installed.

I'm going to close this, as there isn't a repro.
I'm going to pin this and lock it for now until CRA does their v4 release.

[bradzacher]

If you encounter this error, then do the following, in this order:

(1)

Check your ESLint config - you MUST be using @typescript-eslint/no-use-before-define, and not the core no-use-before-define rule. See this FAQ post

(2)

In some cases, your node_modules could just be in a bad state for some reason.

Try deleting your node_modules and doing a fresh install.

(3)

Check your local install for old versions of our tooling. You can use one of the following commands to do so:

$ npm list @typescript-eslint/eslint-plugin @typescript-eslint/parser
$ yarn list @typescript-eslint/eslint-plugin @typescript-eslint/parser

If you see any versions that do not start with 4, then this is the cause of your problem.
This is not a bug in this library. There's nothing we here can do to help you.
You must wait until your dependency releases and supports the latest version of our tooling.

See this FAQ https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#how-do-i-check-to-see-what-versions-are-installed