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
DisappearedStar opened this issue Sep 6, 2020 · 15 comments
Closed

Comments

@DisappearedStar
Copy link

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

@bradzacher bradzacher commented Sep 6, 2020

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 and removed triage labels Sep 6, 2020
@bradzacher bradzacher self-assigned this Sep 6, 2020
@bradzacher bradzacher added the has pr label Sep 6, 2020
@bradzacher
Copy link
Member

@bradzacher bradzacher commented Sep 6, 2020

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

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

Fixes #2502
@DisappearedStar
Copy link
Author

@DisappearedStar DisappearedStar commented Sep 6, 2020

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

@bradzacher bradzacher commented Sep 6, 2020

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

bradzacher added a commit that referenced this issue Sep 6, 2020
…agma reference (#2503)

Fixes #2502
@DisappearedStar
Copy link
Author

@DisappearedStar DisappearedStar commented Sep 6, 2020

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

@nstrelow
Copy link

@nstrelow 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 👍

@nstrelow
Copy link

@nstrelow nstrelow commented Sep 7, 2020

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

@gasscoelho
Copy link

@gasscoelho gasscoelho 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 👍

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

@bradzacher bradzacher commented Sep 7, 2020

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

@gasscoelho
Copy link

@gasscoelho gasscoelho commented Sep 7, 2020

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

@bradzacher bradzacher commented Sep 9, 2020

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
phaux added a commit to phaux/typescript-eslint that referenced this issue Sep 28, 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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

7 participants