Using react-stripe-elements with preact

I have an app that I'm trying to migrate from react to preact. On the whole everything seems to be working 1-to-1 with preact. Apart from react-stripe-elements.

I'm aware that you don't care much about preact most probably :). Yet, does this error ring any bells to anyone?

Provider.js:82 Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'NewSubscriptionStripe' | property 'v' -> object with constructor 'Object' | property 'k' -> object with constructor 'Array' | ... | property 'props' -> object with constructor 'Object' --- property '__self' closes the circle at JSON.stringify () at getOrCreateStripe (Provider.js:82) at new Provider (Provider.js:119)

p.s. please, close this issue right away if you don't think this isn't the right place.

class NewSubscriptionStripe extends React.Component<Props> {
  render() {
    const { stripePublicKey, plan, actionPath, customer, card, address } = this.props

    return (
      <StripeProvider apiKey={stripePublicKey}>
        <Elements>
          <NewSubscription plan={plan} actionPath={actionPath} customer={customer} card={card} address={address} />
        </Elements>
      </StripeProvider>
    )
  }
}

I got some help from the preact project, and I'd like to share it here for anyone else facing the same issue (https://github.com/preactjs/preact/issues/2252)

Comment:

Looks like Stripe is inadvertently treating all props as configuration. They JSON-serialize config options as a quick way to memoize the Stripe API client backing instance, and what's happening here is that the source and self helper props from Babel's JSX transform (only added in development mode) are leaking into that object.

The thing is, Preact handles those JSX properties during development as long as you've imported preact/debug:

Solution:

// In your main/entry JS file:
import 'preact/debug';
// ... rest of your app

stripe-archive / react-stripe-elements

Using react-stripe-elements with preact #491