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


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: [
  plugins: [
  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': [
        controlComponents: ['select']
    'jsx-a11y/label-has-for': [
        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': [
    'no-restricted-modules': ['error', 'chai'],
    'no-unused-vars': [
        varsIgnorePattern: '^_',
        argsIgnorePattern: '^_'
    'no-var': 'error',
    'one-var': ['error', { initialized: 'never' }],
    'prefer-const': [
        destructuring: 'any'
    'prettier/prettier': 'error',
    'react/jsx-curly-brace-presence': [
      { children: 'ignore', props: 'never' }
    'react/jsx-no-bind': [
        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


Official answer is here and it says indeed to add them to globals or to disable the no-undef rule because TypeScript already has already its own checks:

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

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:

"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
and/or you can use one of the pre-defined environment (env)

Answered By – axel

Answer Checked By – Senaida (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.