ESLint does not recognise `DocumentEventMap`, complaining no-undef

Question

I have a simple type defined as follows,

export type ClickEventProps = {
  handler: (event: MouseEvent) => void;
  additionalEvents?: Array<keyof DocumentEventMap>;
};

ESLint is complaining DocumentEventMap is undefined, giving a no-undef. Is there a way to fix it without disabling the rule for this line? Is it a bug in @typescript-eslint?

I have the current dev dependencies and versions for @typescript-eslint,

"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",

In .eslintrc.js, I have the following,

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['prettier', 'react', '@typescript-eslint'],
};

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext", "WebWorker"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "jsx": "react-jsx",
    "types": ["cypress", "node", "cypress-real-events"],
  },
}

Answer 1

This FAQ article in the typescript-eslint docs contains an answer to your question:

https://typescript-eslint.io/linting/troubleshooting#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors

Relevant excerpts:

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.

...

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