Namespace 'global.JSX' has no exported member 'TargetedEvent'

Question

Here is the line of code:

  const handleChangeProduct = (e: JSX.TargetedEvent<HTMLSelectElement, Event>) => {
    const val = e.currentTarget.value;
    setDbEditProduct(val);
  };

Getting this error:

Namespace 'global.JSX' has no exported member 'TargetedEvent'

Here are my imports:

import { h, FunctionalComponent, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import NativeSelect from '@material-ui/core/NativeSelect';

Here is my TSConfig:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2019", "DOM", "ES6", "DOM.Iterable", "ScriptHost"],
    "strict": true,
    "alwaysStrict": true,
    "removeComments": false,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "jsx": "react",
    "jsxFactory": "h",
    "skipLibCheck": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["node"]
  },
  "include": ["./css.d.ts", "./global.d.ts", "./frontend/**/*"]
}

Answer 1

The error was sort-of helpful... here's what fixed it:

import { h, FunctionalComponent, JSX, Fragment } from 'preact';

(Added JSX to the imports)