Importing web component `[...] does not exist on type 'JSX.IntrinsicElements'`

I'm trying to insert a web component in my Solid component:

import '@power-elements/stripe-elements'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'stripe-payment-request': any
    }
  }
}

const App = (props) => <div>
      <stripe-payment-request
        publishable-key={props.options.publicKey}
        client-secret={props.options.paymentIntentSecret}
        generate="source"
        amount="125"
        label="Double Double"
        country="CA"
        currency={props.options.currency}
      />
</div>

import '@power-elements/stripe-elements'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'stripe-payment-request': any
    }
  }
}

const App = (props) => <div>
      <stripe-payment-request
        publishable-key={props.options.publicKey}
        client-secret={props.options.paymentIntentSecret}
        generate="source"
        amount="125"
        label="Double Double"
        country="CA"
        currency={props.options.currency}
      />
</div>

But it says Property 'stripe-payment-request' does not exist on type 'JSX.IntrinsicElements'.. Any idea how to fix this?

3 Replies

thetarnav•2y ago

replace global with module "solid-js"

thetarnav•2y ago

https://stackoverflow.com/questions/72238932/how-to-use-a-web-component-in-a-solid-js-project

Stack Overflow

How to use a web component in a solid.js project?

When I try to use a web component in my Solid.js project (instead of building one), it doesn't recognize the tag as it is not an intrinsic element. How can I setup solid.js to recognize web compone...

Baptiste•2y ago

Thank you for the help 🙏

Gaming

Programming

Importing web component `[...] does not exist on type 'JSX.IntrinsicElements'`