Can't create a production build with package imported - Error occurred prerendering page; ReferenceError: window is not defined

[RamazaniMwemedi]

Whenever I try to make a production build with this component imported, it keep throwing an error as shown below

I have troubleshooted and I have noticed that the error comes from here

I have tried to import it with Dynamics but still no changes,

[JayWebtech]

Same here. Were you able to find a solution?

[Azania-Mokhampane]

getting the same issue too

[Azania-Mokhampane]

@JayWebtech @RamazaniMwemedi this worked for me,

const PayWithPaystack  = () => {
     
  const isBrowser = typeof window !== 'undefined';

  if (!isBrowser) {
    return null;
  }

  // Import your Paystack-related code here
  const { usePaystackPayment } = require('react-paystack')

const config = {...}

const initializePayment = usePaystackPayment(config);

 return (
    <button onClick={initializePayment}>
      Pay
    </button>
  );
};

export default PayWithPaystack;

[stephengade]

Started getting this error immediately I migrate to Nextjs 15, React 19 (Server component)

[RamazaniMwemedi]

An email from the developer team on how I should go around it.

Here is the link https://paystack.com/docs/api/transaction/#initialize

[stephengade]

Hmmm.... That may be straightforward approach. I should have adopted using the API directly rather than SDK.

But currently I fixed the window error by converting the whole page to client with 'use client'

I first of all mark the component with 'use client'

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

on doing that, the error is gone...

[chizidotdev]

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

@stephengade 's comment did the trick

My implementation looks like this, using the next/dynamic utility to import the PaystackButton

- import { PaystackButton } from "react-paystack";

+ import dynamic from 'next/dynamic';
+ const PaystackButton = dynamic(() => import("react-paystack").then((c) => c.PaystackButton), {
+   ssr: false,
+ });

[osfieldgaga]

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

@stephengade 's comment did the trick

My implementation looks like this, using the next/dynamic utility to import the PaystackButton

- import { PaystackButton } from "react-paystack";

+ import dynamic from 'next/dynamic';
+ const PaystackButton = dynamic(() => import("react-paystack").then((c) => c.PaystackButton), {
+   ssr: false,
+ });

this seems to work. thanks

[Codedwells]

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

@stephengade 's comment did the trick

My implementation looks like this, using the next/dynamic utility to import the PaystackButton

• import { PaystackButton } from "react-paystack";

• import dynamic from 'next/dynamic';
• const PaystackButton = dynamic(() => import("react-paystack").then((c) => c.PaystackButton), {
• ssr: false,
• });

This works great