Preact: Has anyone used react-stripe-elements with preact?

[StanBright]

Hi,

I'm trying to convert one of my projects form React to Preact. Everything seems working as expected apart from Stripe's integration (throught react-stripe-elements).

Simply importing their main wrapping component "StripeProvider" causes the following error:

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)

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>
    )
  }
}

Any idea how to debug this further or a known work-around?

The same code works perfectly with React.

Thanks!

[cristianbote]

Hey @StanBright thank you for opening this issue! Can you share a codesandbox/repo with the reproducing error? That would help us find a fix for it

[developit]

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:

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

My guess is that you're not importing the debug extension, which means those helper props are left in Component props during rendering. That would also mean this issue would not be present in a production build. Would love to know if that's the case!

Cheers.

[StanBright]

Thanks so much for the help @developit! You are a star. The issue was exactly as you advised.

saashub.com is now using Preact on production with the benefits of smaller bundle size and even faster performance.

For the record, the bundle size decreased 20%: 577k => 460k ✨