Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
DisappearedStar opened this issue Sep 6, 2020 · 15 comments · Fixed by #2503
Closed
3 tasks done

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

DisappearedStar opened this issue Sep 6, 2020 · 15 comments · Fixed by #2503
Assignees
Labels
bug Something isn't working has pr there is a PR raised to close this package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin

Comments

@DisappearedStar
Copy link

DisappearedStar commented Sep 6, 2020

  • 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
@DisappearedStar DisappearedStar added package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin triage Waiting for maintainers to take a look labels Sep 6, 2020
@bradzacher
Copy link
Member

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 bradzacher added bug Something isn't working and removed triage Waiting for maintainers to take a look labels Sep 6, 2020
@bradzacher bradzacher self-assigned this Sep 6, 2020
@bradzacher bradzacher added the has pr there is a PR raised to close this label Sep 6, 2020
@bradzacher
Copy link
Member

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

@DisappearedStar
Copy link
Author

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
Copy link
Member

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

@DisappearedStar
Copy link
Author

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

@nstrelow
Copy link

nstrelow commented Sep 7, 2020

@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
Copy link
Member

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
Copy link

nstrelow commented Sep 7, 2020

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

@gasscoelho
Copy link

@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
Copy link
Member

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

@gasscoelho
Copy link

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. 🙂

@tibic
Copy link

tibic commented Sep 9, 2020

"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
Copy link

Rennzie commented Sep 9, 2020

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

@linonetwo
Copy link

linonetwo commented Sep 9, 2020

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],

Screen Shot 2020-09-09 at 10 21 00 PM

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

Screen Shot 2020-09-09 at 10 20 50 PM

@bradzacher
Copy link
Member

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.

@typescript-eslint 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working has pr there is a PR raised to close this package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin
Projects
None yet
7 participants