Typescript eslint no use before define

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

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] ‘React’ was used before it was defined on edited code #2540

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

Comments

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

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

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:

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] 

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

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

bradzacher added awaiting response Issues waiting for a reply from the OP or another party and removed package: parser Issues related to @typescript-eslint/parser triage Waiting for maintainers to take a look labels Sep 11, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

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.

• 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.
  • Dumping your configs will let us help you.
  • 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.

  Источник

  no-use-before-define

  In JavaScript, prior to ES6, variable and function declarations are hoisted to the top of a scope, so it’s possible to use identifiers before their formal declarations in code. This can be confusing and some believe it is best to always declare variables and functions before using them.

  In ES6, block-level bindings ( let and const ) introduce a “temporal dead zone” where a ReferenceError will be thrown with any attempt to access the variable before its declaration.

  Rule Details

  This rule will warn when it encounters a reference to an identifier that has not yet been declared.

  Examples of incorrect code for this rule:

  /*eslint no-use-before-define: "error"*/ alert(a); var a = 10; f(); function f() > function g()  return b; > var b = 1;  alert(c); let c = 1; >  class C extends C > >  class C  static x = "foo"; [C.x]() > > >  const C = class  static x = C; > >  const C = class  static  C.x = "foo"; > > > export  foo >; const foo = 1; 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45 

  Examples of correct code for this rule:

  /*eslint no-use-before-define: "error"*/ var a; a = 10; alert(a); function f() > f(1); var b = 1; function g()  return b; >  let c; c++; >  class C  static x = C; > >  const C = class C  static x = C; > >  const C = class  x = C; > >  const C = class C  static  C.x = "foo"; > > > const foo = 1; export  foo >; 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47 

  Options

   "no-use-before-define": ["error",  "functions": true, "classes": true, "variables": true, "allowNamedExports": false >] > 1
  2
  3
  4
  5
  6
  7
  8 

  • functions ( boolean ) — The flag which shows whether or not this rule checks function declarations. If this is true , this rule warns every reference to a function before the function declaration. Otherwise, ignores those references. Function declarations are hoisted, so it’s safe. Default is true .
  • classes ( boolean ) — The flag which shows whether or not this rule checks class declarations of upper scopes. If this is true , this rule warns every reference to a class before the class declaration. Otherwise, ignores those references if the declaration is in upper function scopes. Class declarations are not hoisted, so it might be danger. Default is true .
  • variables ( boolean ) — This flag determines whether or not the rule checks variable declarations in upper scopes. If this is true , the rule warns every reference to a variable before the variable declaration. Otherwise, the rule ignores a reference if the declaration is in an upper scope, while still reporting the reference if it’s in the same scope as the declaration. Default is true .
  • allowNamedExports ( boolean ) — If this flag is set to true , the rule always allows references in export <>; declarations. These references are safe even if the variables are declared later in the code. Default is false .

  functions

  Examples of correct code for the < "functions": false >option:

  /*eslint no-use-before-define: ["error", < "functions": false >]*/ f(); function f() > 1
  2
  3
  4 

  This option allows references to function declarations. For function expressions and arrow functions, please see the variables option.

  classes

  Examples of incorrect code for the < "classes": false >option:

  /*eslint no-use-before-define: ["error", < "classes": false >]*/ new A(); class A  >  class C extends C > >  class C extends D > class D > >  class C  static x = "foo"; [C.x]() > > >  class C  static  new D(); > > class D > > 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30 

  Examples of correct code for the < "classes": false >option:

  /*eslint no-use-before-define: ["error", < "classes": false >]*/ function foo()  return new A(); > class A  > 1
  2
  3
  4
  5
  6
  7
  8 

  variables

  Examples of incorrect code for the < "variables": false >option:

  /*eslint no-use-before-define: ["error", < "variables": false >]*/ console.log(foo); var foo = 1; f(); const f = () => >; g(); const g = function() >;  const C = class  static x = C; > >  const C = class  static x = foo; > const foo = 1; >  class C  static  this.x = foo; > > const foo = 1; > 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32 

  Examples of correct code for the < "variables": false >option:

  /*eslint no-use-before-define: ["error", < "variables": false >]*/ function baz()  console.log(foo); > var foo = 1; const a = () => f(); function b()  return f(); > const c = function()  return f(); > const f = () => >; const e = function()  return g(); > const g = function() >  const C = class  x = foo; > const foo = 1; > 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21 

  allowNamedExports

  Examples of correct code for the < "allowNamedExports": true >option:

  /*eslint no-use-before-define: ["error", < "allowNamedExports": true >]*/ export  a, b, f, C >; const a = 1; let b; function f () > class C > 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11 

  Examples of incorrect code for the < "allowNamedExports": true >option:

  /*eslint no-use-before-define: ["error", < "allowNamedExports": true >]*/ export default a; const a = 1; const b = c; export const c = 1; export function foo()  return d; > const d = 1; 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12 

  Version

  This rule was introduced in ESLint v0.0.9.

  Источник

  Saved searches

  Use saved searches to filter your results more quickly

  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

  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

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

  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

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

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

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

  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

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

  Источник

  Читайте также:  Сколько времени нужно чтобы изучить php