Skip to content

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

@artecoop

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    fix: out of date packagesuser was on an old version of our tooling or ESLint, updating fixed it

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions