React 18 compatibility

[thomassb]

Summary

React 18 was made available on March 29, 2022.
Current depedencies
"react": "^16.8.0 || ^17.0.0",

Has anyone conducted a compatibility upgrade test?

[christopher-stripe]

Hi @thomassb, I ran a quick test and found that changes in React 18 break React Stripe.js completely when using a hybrid server/client setup.

So, we don't currently support React 18, but plan to. I'll update here once we have a more concrete timeline

[RhRU]

Hi @thomassb, I ran a quick test and found that changes in React 18 break React Stripe.js completely when using a hybrid server/client setup.

So, we don't currently support React 18, but plan to. I'll update here once we have a more concrete timeline

Hy Christopher. Do you have any updates on this issue?

[Theofilos-Chamalis]

I can confirm I have the same issue with Next.js v12.1.4 and react/react-dom v.18.0.0

[caprica]

Related I suppose, following the React example from https://stripe.com/docs/payments/quickstart with React 18 in strict mode causes warnings to be emitted like "Unsupported prop change: options.clientSecret is not a mutable property.", because of the double-invocation of the useEffect. I don't know if that is a benign warning or not yet.

[rawjson]

I ran into the same issue when I upgraded my next js app from 11 to 12. I have react-dom version - 18. Right now I can't make any stripe element to work. The element does not show up in the iframe.

The problem is with the "loadStripe" instance. According to stripe docs if you pass a Promise to the Elements provider and the Promise has not yet resolved, then useElements will return null.

If anyone has a solution then let me know... Thanks :)

[vbudovski]

How about something like this? https://codesandbox.io/s/awesome-hooks-qmkoqh?file=/src/App.js

[tettoffensive]

I'm thinking this is why I'm getting typescript errors with React 18 and Stripe Elements:

const stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY ?? '');

const StripeCheckout = ({ user }: { user: User }) => {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm user={user} />
    </Elements>
  );
};

Type error: Type '{ children: Element; stripe: Promise<Stripe | null>; }' is not assignable to type 'IntrinsicAttributes & ElementsProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ElementsProps'.

Maybe something to do with this: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc/71809927#71809927

[blvdmitry]

@tettoffensive Yes, that's exactly that. A lot of packages got to this migration path as they have to add children manually to their typings. The same applies here.

This MR seems to address it: #283

[bmathews-stripe]

The typescript issue has been resolved in @stripe/react-stripe-js v1.7.2.

We're working on a fix for React 18's StrictMode and will update this thread once resolved.

[tomaszzmudzinski]

Stripe is the last npm library which is not prepared for react 18 in our project 🙈 Do you even know the date when you will be ready for it?

[akibrahimug]

Is there an alternative approach to the issue with the stripe Elements.

[dwetoskey]

I'm currently in the same boat and wondering if there is a different payment processor package that will work with React 18, but so far I'm striking out.

[nirmalshah88]

Any updates on when we can expect this to roll out?

[BhaskaranR]

Any updates on when we can expect this to roll out?

+1

[dwetoskey]

Just so everyone is aware that might be finishing up a project like myself, the PayPal packages do seem to be working with React 18. Hopefully the Stripe packages will be ready soon.

[thefrisson]

Would also like to know when the update for React 18 will be released... Just getting into real React to use libraries like Stripe (I usually use Plotly Dash for frontend development), and thought I had somehow incorrectly created my project components, only to find out that it is a compatibility issue with Stripe on one of the most widely used web frameworks....

[dangolbeeker]

I'm working on a pull request it should be ready by the end of the week.

• I do not work for Stripe

[tomaszzmudzinski]

I'm working on a pull request it should be ready by the end of the week.

• I do not work for Stripe

Sick situation, but everyone will be grateful ❤️

[tylersmith-stripe]

Update: We have a PR under review for React 18 support: #292. (thank you @bmathews-stripe & @christopher-stripe!)

[bmathews-stripe]

We've published a pre-release version with changes to support React 18's StrictMode:

"@stripe/react-stripe-js": "1.8.0-0"

yarn add @stripe/react-stripe-js@1.8.0-0

Let us know if you run into any issues with this!

[bmathews-stripe]

Promoted these changes to v1.8.0.

"@stripe/react-stripe-js": "1.8.0"

yarn add @stripe/react-stripe-js@1.8.0