Can not use a custom element with a declaration in the tsx file.

[Awen-hub]

Code

//App.tsx
import React from 'react';

function App() {
  return (
    <div className="App">
      <first></first>
    </div>
  );
}
export default App;

//first.d.ts
declare global {
  namespace JSX {
    interface IntrinsicElements {
      first: any;
    }
  }
}

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Although I declare the custom element <first /> in first.d.ts, VSCode report an error "Property 'first' does not exist on type 'JSX.IntrinsicElements'." So I need a help to solve this problem.

Enviroment

• typescript: "4.6.2"

[RyanCavanaugh]

It's not legal to have a declare global block as the only declaration in a file. Please post a more complete repro (or one without unrelated errors).

[Awen-hub]

The repo. It‘s just a basic react-app with typescript.

[Awen-hub]

I just want to use a custom element(web component) in react with typescript and I don't know how to define it in JSX interface.

[RyanCavanaugh]

You need to remove the declare global { } outer thing and just write namespace JSX at the top level. skipLibCheck is on so you're not seeing the error that it's illegal to have a declare global in a non-module file.

[Awen-hub]

Thanks very much.