Usage in Typescript?

[ErikAGriffin]

I'm having trouble using this component in a Gatsby Typescript product.

The web-component is not recognized as a valid JSX element. Do you have any guidance on how we may overcome this issue?

I see that the source code is written in typescript, with a global declaration at the bottom. But perhaps this isn't being picked up by my Typescript settings?

Here is the specific error: Property 'lite-youtube' does not exist on type 'JSX.IntrinsicElements'.

[ErikAGriffin]

I was able to get a build working using the following, but it's quite messy:

import  '@justinribeiro/lite-youtube';
import { LiteYTEmbed } from '@justinribeiro/lite-youtube';

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ['lite-youtube']: CustomElement<LiteYTEmbed>;
    }
  }
}
// Then within the jsx:
<lite-youtube videoId="guJLfqTFfIw" autoLoad />;

[justinribeiro]

Cheers for the note and workaround. Humm, let me give this some thought about making this case easier.

[ErikAGriffin]

@justinribeiro note: I actually had to remove the import '@justinribeiro/lite-youtube'; line to get this to compile. Otherwise building throws an error ReferenceError: HTMLElement is not defined.

I'm using Gatsby, and originally moved this import line to the gatsby-browser.js and gatsby-ssr.js files with no problem (at the time these files were empty, the import statement was the only content).

However now that I have added other content to these files, once again that import statement throws that error on build. I'm forced to use the CDN script tag.