JSX and GeoJSON are not defined

[simPod]

Tell us about your environment

• ESLint Version: 7.9.0
• Node Version: 14.9.0

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using?

@typescript-eslint/parser

Please show your full configuration:

I have @types/react and @types/geojson installed.

Configuration

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json"
    },
    "plugins": [
        "@typescript-eslint",
        "import",
        "typescript-sort-keys"
    ],
    "env": {
        "browser": true,
        "jest": true,
        "jquery": true
    },
    "extends": [
        "airbnb-typescript",
        "plugin:react-hooks/recommended"
    ],
    "rules": {
        "@typescript-eslint/naming-convention": [
            "error",
            {
                "selector": "interface",
                "format": ["PascalCase"],
                "custom": {
                    "regex": "^I[A-Z]",
                    "match": false
                }
            }
        ],
        "@typescript-eslint/strict-boolean-expressions": [
            "error", {
                "allowString": false,
                "allowNumber": false,
                "allowNullableObject": false
            }
        ],
        "import/no-unresolved": "error",
        "import/prefer-default-export": 0,
        "max-len": [
            "error",
            {
                "code": 120,
                "ignoreComments": true,
                "ignoreTemplateLiterals": true
            }
        ],
        "no-bitwise": 0,
        "no-continue": 0,
        "no-nested-ternary": 0,
        "no-underscore-dangle": 0,
        "object-curly-newline": [
            "error", {
                "ObjectExpression": {
                    "multiline": true,
                    "minProperties": 5
                },
                "ObjectPattern": {
                    "multiline": true,
                    "minProperties": 5
                },
                "ImportDeclaration": {
                    "multiline": true
                },
                "ExportDeclaration": {
                    "multiline": true,
                    "minProperties": 5
                }
            }
        ],
        "padding-line-between-statements": [
            "error",
            { "blankLine": "always", "prev": "*", "next": "return" },
            { "blankLine": "always", "prev": "if", "next": "*" }
        ],
        "sort-keys": [
            "error",
            "asc",
            {"caseSensitive": true, "natural": true}
        ],
        "space-unary-ops": [
            "error",
            {
                "words": true,
                "nonwords": false,
                "overrides": {
                    "!": true
                }
            }
        ],
        "react/jsx-one-expression-per-line": 0,
        "react/jsx-props-no-spreading": 0,
        "react/prop-types": 0,
        "typescript-sort-keys/interface": [
            "error",
            "asc",
            {
                "natural": true,
                "requiredFirst": true
            }
        ],
        "typescript-sort-keys/string-enum": [
            "error",
            "asc",
            { "natural": true }
        ]
    },
    "settings": {
        "import/parsers": {
            "@typescript-eslint/parser": [ ".ts", ".tsx" ]
        },
        "import/resolver": {
            "typescript": { }
        }
    }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import React from 'react';

const Component = () => {
  const state = React.useState<keyof JSX.IntrinsicElements>();
  const state2 = React.useState<GeoJSON.Feature | GeoJSON.FeatureCollection | string | null>(null);

  return <></>;
};

eslint --ext .ts,.tsx src-fe/ts --max-warnings=0

What did you expect to happen?

No errors

What actually happened? Please include the actual, raw output from ESLint.

'JSX' is not defined no-undef
'GeoJSON' is not defined no-undef

Are you willing to submit a pull request to fix this bug?

Not sure how to fix

[mdjermanovic]

Hi @simPod, thanks for the issue!

This is caused by changes in @typescript-eslint scope analysis, since v4.

Relevant issues:

• Incorrectly triggers no-undef and no-redeclare in some cases typescript-eslint/typescript-eslint#2477
• [no-use-before-define & no-undef] regressions in 4.0.1 typescript-eslint/typescript-eslint#2508
• [no-undef] undefined namespace after upgrading from 3.10.1 to 4.x.x typescript-eslint/typescript-eslint#2528

If I understand correctly, the suggested solution is to either specify globals, or turn the no-undef rule off and let typescript catch those errors.

[simPod]

Thank you!