Why eslint consider JSX or some react @types undefined, since upgrade typescript-eslint/parser to version 4.0.0

Question

The context is pretty big project built with ReactJs, based on eslint rules, with this eslint configuration

const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1  module.exports = {   extends: [     'eslint:recommended',     'plugin:jsx-a11y/recommended',     'plugin:react/recommended',     'prettier',     'prettier/@typescript-eslint'   ],   plugins: [     'react',     'html',     'json',     'prettier',     'import',     'jsx-a11y',     'jest',     '@typescript-eslint',     'cypress'   ],   settings: {     'html/indent': '0',     es6: true,     react: {       version: '16.5'     },     propWrapperFunctions: ['forbidExtraProps'],     'import/resolver': {       node: {         extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']       },       alias: {         extensions: ['.js', '.jsx', '.json']       }     }   },   env: {     browser: true,     node: true,     es6: true,     jest: true,     'cypress/globals': true   },   globals: {     React: true,     google: true,     mount: true,     mountWithRouter: true,     shallow: true,     shallowWithRouter: true,     context: true,     expect: true,     jsdom: true   },   parser: '@typescript-eslint/parser',   parserOptions: {     ecmaVersion: 'es2020',     ecmaFeatures: {       globalReturn: true,       jsx: true     },     lib: ['ES2020']   },   rules: {     'arrow-parens': ['error', 'as-needed'],     'comma-dangle': ['error', 'never'],     eqeqeq: ['error', 'smart'],     'import/first': 0,     'import/named': 'error',     'import/no-deprecated': process.env.NODE_ENV === 'production' ? 0 : 1,     'import/no-unresolved': ['error', { commonjs: true }],     'jsx-a11y/alt-text': DONT_WARN_CI,     'jsx-a11y/anchor-has-content': DONT_WARN_CI,     'jsx-a11y/anchor-is-valid': DONT_WARN_CI,     'jsx-a11y/click-events-have-key-events': DONT_WARN_CI,     'jsx-a11y/heading-has-content': DONT_WARN_CI,     'jsx-a11y/iframe-has-title': DONT_WARN_CI,     'jsx-a11y/label-has-associated-control': [       'error',       {         controlComponents: ['select']       }     ],     'jsx-a11y/label-has-for': [       'error',       {         required: {           some: ['nesting', 'id']         }       }     ],     'jsx-a11y/media-has-caption': DONT_WARN_CI,     'jsx-a11y/mouse-events-have-key-events': DONT_WARN_CI,     'jsx-a11y/no-autofocus': DONT_WARN_CI,     'jsx-a11y/no-onchange': 0,     'jsx-a11y/no-noninteractive-element-interactions': DONT_WARN_CI,     'jsx-a11y/no-static-element-interactions': DONT_WARN_CI,     'jsx-a11y/no-noninteractive-tabindex': DONT_WARN_CI,     'jsx-a11y/tabindex-no-positive': DONT_WARN_CI,     'no-console': 'warn',     'no-debugger': 'warn',     'no-mixed-operators': 0,     'no-redeclare': 'off',     'no-restricted-globals': [       'error',       'addEventListener',       'blur',       'close',       'closed',       'confirm',       'defaultStatus',       'defaultstatus',       'event',       'external',       'find',       'focus',       'frameElement',       'frames',       'history',       'innerHeight',       'innerWidth',       'length',       'localStorage',       'location',       'locationbar',       'menubar',       'moveBy',       'moveTo',       'name',       'onblur',       'onerror',       'onfocus',       'onload',       'onresize',       'onunload',       'open',       'opener',       'opera',       'outerHeight',       'outerWidth',       'pageXOffset',       'pageYOffset',       'parent',       'print',       'removeEventListener',       'resizeBy',       'resizeTo',       'screen',       'screenLeft',       'screenTop',       'screenX',       'screenY',       'scroll',       'scrollbars',       'scrollBy',       'scrollTo',       'scrollX',       'scrollY',       'self',       'status',       'statusbar',       'stop',       'toolbar',       'top'     ],     'no-restricted-modules': ['error', 'chai'],     'no-unused-vars': [       'error',       {         varsIgnorePattern: '^_',         argsIgnorePattern: '^_'       }     ],     'no-var': 'error',     'one-var': ['error', { initialized: 'never' }],     'prefer-const': [       'error',       {         destructuring: 'any'       }     ],     'prettier/prettier': 'error',     'react/jsx-curly-brace-presence': [       'error',       { children: 'ignore', props: 'never' }     ],     'react/jsx-no-bind': [       'error',       {         allowArrowFunctions: true       }     ],     'react/jsx-no-literals': 1,     'react/jsx-no-target-blank': DONT_WARN_CI,     'react/jsx-no-undef': ['error', { allowGlobals: true }],     'react/no-deprecated': DONT_WARN_CI,     'react/prop-types': 0,     'require-await': 'error',     'space-before-function-paren': 0   },   overrides: [     {       files: ['**/*.ts', '**/*.tsx'],       rules: {         'no-unused-vars': 'off',         'import/no-unresolved': 'off'       }     }   ] }  

Since the upgrade of the library "@typescript-eslint/parser": "^4.0.0" from "@typescript-eslint/parser": "^3.10.1" this following command ...

eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss' 

... brings these following errors

  9:45  error  'ScrollBehavior' is not defined                       no-undef   224:12  error  'KeyboardEventInit' is not defined                  no-undef   53:5   error  'JSX' is not defined                                 no-undef 

I know I could fix them adding to the prop globals also the keys JSX: true or KeyboardEventInit: true but it is not the way I want to go. Any ideas of what is going on here? Where is the configuration error? Thanks a lot

Answer 1

I had the same issue when trying to declare variables as of type JSX.Element in typescript. I added "JSX":"readonly" to globals in .eslintrc.json and the problem was gone. In your case it would be:

globals: {     React: true,     google: true,     mount: true,     mountWithRouter: true,     shallow: true,     shallowWithRouter: true,     context: true,     expect: true,     jsdom: true,     JSX: true, }, 

From the following link, I got that you actually use several options after JSX. You could use true,false, writable or readonly (but not off).

https://eslint.org/docs/user-guide/configuring

Answer 2

Official answer is here https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors and it says indeed to add them to globals or to disable the no-undef rule because typescript has already its own checks

EDIT

New url of official answer is here https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors

And this is the official documentation copied

## I get errors from the `no-undef` rule about global variables not being defined, even though there are no TypeScript errors  The `no-undef` lint rule does not use TypeScript to determine the global variables that exist - instead, it relies upon ESLint's configuration.  We strongly recommend that you do not use the `no-undef` lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.  As of our v4.0.0 release, this also applies to types. If you use global types from a 3rd party package (i.e. anything from an `@types` package), then you will have to configure ESLint appropriately to define these global types. For example; the `JSX` namespace from `@types/react` is a global 3rd party type that you must define in your ESLint config.  Note, that for a mixed project including JavaScript and TypeScript, the `no-undef` rule (like any role) can be turned off for TypeScript files alone by adding an `overrides` section to .eslintrc.json:    json     "overrides": [         {             "files": ["*.ts"],             "rules": {                 "no-undef": "off"             }         }     ]   If you choose to leave on the ESLint `no-undef` lint rule, you can [manually define the set of allowed `globals` in your ESLint config](https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals), and/or you can use one of the [pre-defined environment (`env`) configurations](https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments).