[no-use-before-define] `import * as React` marked as error in TSX/JSX file #2502

DisappearedStar · 2020-09-06T10:00:28Z

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

.eslintrc.js

{
    parser: '@typescript-eslint/parser',
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 2018,
        ecmaFeatures: {
            jsx: true,
        },
    },
    rules: {
        'no-use-before-define': 'off',
        '@typescript-eslint/no-use-before-define': ['error', {variables: false}],
    }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "allowJs": true,
    "importHelpers": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "isolatedModules": true,
    "importsNotUsedAsValues": "error"
  }
}

// foo.tsx

import * as React from 'react';

const App = () => (
    <span>hello</span>
);

Expected Result

No lint errors

Actual Result

foo.tsx 1:13 React was used before it was defined. @typescript-eslint/no-use-before-define

Additional Info

AFAICT the error was introduced in 4.0.2-alpha.12 (alpha11 is ok)
essentially, in the project I'm involved with every .tsx / .jsx file that contains React import is affected

Versions

package	version
`@typescript-eslint/eslint-plugin`	`4.0.2-alpha.15`
`@typescript-eslint/parser`	`4.0.2-alpha.15`
`TypeScript`	`4.0.2`
`ESLint`	`7.8.1`
`node`	`10.16.3`

The text was updated successfully, but these errors were encountered:

bradzacher · 2020-09-06T16:59:03Z

Huh. That's an interesting side-effect. I hadn't thought about that rule doing that.

The usage is in exactly the same place as the definition, so it shouldn't be reporting. Seems like a bit of a bug in the rule that I will have to worm around.

bradzacher · 2020-09-06T17:24:11Z

I figured as much - the rule does < not <=, hence the false positive.
Easy fix.

…agma reference Fixes #2502

DisappearedStar · 2020-09-06T17:39:01Z

Along with this issue, @typescript-eslint/parser 4.0.2-alpha.12 started to trigger no-undef at JSX intrinsic elements (i.e. <div>) in .jsx files.
I have read #2477 and corresponding FAQ entry. Adding "JSX": "readonly" global didn't help; adding each intrinsic element to globals would be very silly.

@bradzacher should I file a new issue?

bradzacher · 2020-09-06T18:07:09Z

nah don't worry. I was actually just thinking about that. I'll have a PR in a sec.

…agma reference (#2503) Fixes #2502

DisappearedStar · 2020-09-06T18:57:57Z

Just tried alpha18 — the abovementioned issues are gone. Thank you!

nstrelow · 2020-09-07T14:36:04Z

@bradzacher
For me React imports are still broken on 4.0.2-alpha.20 and are working with 4.0.2-alpha.11

import React, { useState, useEffect } from "react";

produces

error  'React' was used before it was defined  no-use-before-define

Did this change not make the alpha 20? Or somehow still broken?
Thanks for your hard work 👍

bradzacher · 2020-09-07T15:00:50Z

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

You're using the wrong rule

nstrelow · 2020-09-07T15:09:49Z

Thanks a lot, wasn't aware of that. Will keep in mind in the future.

gasscoelho · 2020-09-07T19:18:01Z

@bradzacher
For me React imports are still broken on 4.0.2-alpha.20 and are working with 4.0.2-alpha.11
import React, { useState, useEffect } from "react";
produces
error  'React' was used before it was defined  no-use-before-define
Did this change not make the alpha 20? Or somehow still broken?
Thanks for your hard work 👍

Hi @nstrelow, did you find a solution for this? I'm also having the same message... should I disable this rule?

bradzacher · 2020-09-07T19:23:29Z

@gasscoelho did you actually read the thread...? I have already replied with the answer.

gasscoelho · 2020-09-07T19:44:12Z

I did but I didn't quite follow. I had a project configured on 3.10.1 which didn't have the [no-use-before-define] error on import React from 'react' and I had not disabled the rule. But today I was trying to configure a new project and I was having this warning on React import so that's why I asked if I should disable. Anyways, sorry for the misunderstanding. 🙂

See typescript-eslint/typescript-eslint#2502

tibic · 2020-09-09T10:04:37Z

"eslint-plugin-react": "^7.20.6",
"eslint": "^7.8.1",

error 'React' was used before it was defined no-use-before-define

I dont know, feel confused

Rennzie · 2020-09-09T13:58:39Z

I'm also still getting this error with:
"@typescript-eslint/eslint-plugin": "^4.1.0"
"@typescript-eslint/parser": "^4.1.0"

linonetwo · 2020-09-09T14:20:30Z

You're using the wrong rule

Hi confused guys, just use this in your config:

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

Maybe it is just our preset don't aware of this rule yet, you can enable this new rule by hand: '@typescript-eslint/no-use-before-define': [1],

no-use-before-define have many false alarm ↑ , while '@typescript-eslint/no-use-before-define' doesn't ↓

bradzacher · 2020-09-09T15:37:36Z

I'm going to go ahead and lock this to prevent further noise.

linonetwo's very helpful comments (thanks!) plus the FAQ and v4 release notes should be enough to solve this.

Please ensure you read them all, and understand that you need to manually update your config appropriately.

DisappearedStar added package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin triage Waiting for team members to take a look labels Sep 6, 2020

bradzacher added bug Something isn't working and removed triage Waiting for team members to take a look labels Sep 6, 2020

bradzacher self-assigned this Sep 6, 2020

bradzacher added the has pr there is a PR raised to close this label Sep 6, 2020

bradzacher added a commit that referenced this issue Sep 6, 2020

fix(eslint-plugin): [no-use-before-define] false positive with jsx pr…

00450e9

…agma reference Fixes #2502

bradzacher mentioned this issue Sep 6, 2020

fix(eslint-plugin): [no-use-before-define] false positive with jsx pragma reference #2503

Merged

bradzacher closed this as completed in #2503 Sep 6, 2020

bradzacher added a commit that referenced this issue Sep 6, 2020

fix(eslint-plugin): [no-use-before-define] false positive with jsx pr…

5afeeab

…agma reference (#2503) Fixes #2502

bradzacher mentioned this issue Sep 8, 2020

[no-use-before-define] False positives after upgrading from 4.0.1 to 4.1.0 #2520

Closed

3 tasks

coderbyheart added a commit to bifravst/app that referenced this issue Sep 8, 2020

style: disable @typescript-eslint/no-use-before-define

bd90010

See typescript-eslint/typescript-eslint#2502

coderbyheart mentioned this issue Sep 8, 2020

Re-enable @typescript-eslint/no-use-before-define after fix was released bifravst/app#245

Closed

typescript-eslint locked and limited conversation to collaborators Sep 9, 2020

chungweileong94 added a commit to chungweileong94/eslint-config-whiteroom that referenced this issue Oct 8, 2020

Fixed typescript-eslint/typescript-eslint#2502

5e5f7b9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[no-use-before-define] `import * as React` marked as error in TSX/JSX file #2502

[no-use-before-define] `import * as React` marked as error in TSX/JSX file #2502

DisappearedStar commented Sep 6, 2020 •

edited

Loading

bradzacher commented Sep 6, 2020

bradzacher commented Sep 6, 2020

DisappearedStar commented Sep 6, 2020

bradzacher commented Sep 6, 2020

DisappearedStar commented Sep 6, 2020

nstrelow commented Sep 7, 2020 •

edited

Loading

bradzacher commented Sep 7, 2020

nstrelow commented Sep 7, 2020

gasscoelho commented Sep 7, 2020

bradzacher commented Sep 7, 2020

gasscoelho commented Sep 7, 2020

tibic commented Sep 9, 2020

Rennzie commented Sep 9, 2020

linonetwo commented Sep 9, 2020 •

edited

Loading

bradzacher commented Sep 9, 2020

[no-use-before-define] import * as React marked as error in TSX/JSX file #2502

[no-use-before-define] import * as React marked as error in TSX/JSX file #2502

Comments

DisappearedStar commented Sep 6, 2020 • edited Loading

bradzacher commented Sep 6, 2020

bradzacher commented Sep 6, 2020

DisappearedStar commented Sep 6, 2020

bradzacher commented Sep 6, 2020

DisappearedStar commented Sep 6, 2020

nstrelow commented Sep 7, 2020 • edited Loading

bradzacher commented Sep 7, 2020

nstrelow commented Sep 7, 2020

gasscoelho commented Sep 7, 2020

bradzacher commented Sep 7, 2020

gasscoelho commented Sep 7, 2020

tibic commented Sep 9, 2020

Rennzie commented Sep 9, 2020

linonetwo commented Sep 9, 2020 • edited Loading

bradzacher commented Sep 9, 2020

[no-use-before-define] `import * as React` marked as error in TSX/JSX file #2502

[no-use-before-define] `import * as React` marked as error in TSX/JSX file #2502

DisappearedStar commented Sep 6, 2020 •

edited

Loading

nstrelow commented Sep 7, 2020 •

edited

Loading

linonetwo commented Sep 9, 2020 •

edited

Loading