How can we type web components in Astro?

[green brook]

I'm trying to use a custom web component in a .tsx file (React) in Astro. My code looks like this:

export const SomeComponent = ({ 
  code,
  state,
}: Props) => {


  return ( 
    <custom-web-component
      code={code}
      state={state}
    ></custom-web-component>
  )
}

and I'm getting an error like this:

Property 'custom-web-component' does not exist on type 'JSX.IntrinsicElements'

How can I solve this issue? Thanks!

[visual iris]

See https://coryrylan.com/blog/how-to-use-web-components-with-typescript-and-react

[green brook]

Thanks! That solution works when I put that definition in the same file as the component but it doesn't work if I move it to some arbitrary d.ts file. Do you happen to know the solution for housing this globally in a project?

[green brook]

Well now the original solution suddenly stopped working and I'm back to the original error. I don't believe I changed anything... 😮‍💨

[visual iris]

I'm not sure. I tried to dig into the code that Stencil creates when it outputs web components for react, and it's a bit over my head. https://stenciljs.com/docs/react#add-the-react-wrapper-function-to-your-stencil-component-library