CODEWITHSUNDEEP
reactjsstripe-paymentsnext.js
Chris Hansen
Chris Hansen

Reputation: 8685

Stripe + NextJs - window is not defined

I'm trying to use Stripe in NextJs https://github.com/stripe/react-stripe-elements/blob/master/README.md#server-side-rendering-ssr

I keep getting the error "window is not defined". Am I missing something? The code is at the link above.

Upvotes: 0

Views: 868

Answers (2)

A Webb
A Webb

Reputation: 711

Another option is to use a dynamic import for the Stripe component and disable SSR.

StripeForm component file (export as default)
component/StripeForm.tsx

Import it dynamically in pages/stripe like so

const StripeForm = dynamic(() => import("../components/StripeForm"), { ssr: false } )

return (
   ...
   <StripeForm />
   ...
)

Upvotes: 0

visizky
visizky

Reputation: 761

"window is not defined" is shown due to the fact that your code is server-side rendered and can't access the global window object because that is something only a client will understand. move your code inside lifecycle methods as they run only on the client-side.

Upvotes: 2

Related Questions