react-paystack Incompatibility with React 19

[femakin]

Attempting to install [email protected] with React 19 results in a dependency conflict due to peer dependency restrictions.

npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^19.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" from [email protected] npm ERR! node_modules/react-paystack npm ERR! react-paystack@"*" from the root project

[ultimatekristency]

i'm having same isssue, find solution to it?

[femakin]

@ultimatekristency Not yet

[Ibeenoch]

same here, and i don't intend to use --legacy-peer-dependencies which could cause issues during production

[MY-KHEL]

Will deep force work?

[Ibeenoch]

deep force will work, but it is not recommended, as this will give issues during production. There's two workaround to fix this:

1. You fork this github repo add it to your project root under packages/ folder. In the github repo of the paystack you forked, go to the package Json file in the peer dependency section and manually add react^19.0.0 and react-dom^19.0.0 (which is currently latest version) make sure your are in that directory and run npm install, after that go back to the root dir of your project and run: npm i ./packages/iamraphson/react-paystack And that will install the package and allow you use it in your project without issues.

2. Second way around this is to load the paystack inline script https://paystack.com/docs/developer-tools/inlinejs/

[inside-aims]

@Ibeenoch were you able to install it after adding the react ^19.0.0 and react-dom^19.0.0 ? still giving me a bunch of dep errors when I run npm install in the package repo itself.

[Chiomsyn]

I'm also having the same issue.

[Ibeenoch]

@Ibeenoch were you able to install it after adding the react ^19.0.0 and react-dom^19.0.0 ? still giving me a bunch of dep errors when I run npm install in the package repo itself.

Yes I was able it, but wouldn't recommend it. Because if you push it to GitHub, some of the files may be missing.

Instead, use paystack inline script By installing it in react npm i @paystack/inline-js

import Paystack from '@paystack/inline-js';

const makePaymentThroughPayStack = () => { const popup = new Paystack() popup.checkout({ key: PAYSTACK_TEST_PUBLIC_KEY, email: 'email', amount: 10000 * 100, // handle successful transaction onSuccess: () => { // your logic }, onLoad: () => { }, onCancel: () => {

}, onError: () => {

} }) }

[jgmagift]

I am also facing the same issue, I tried --legacy but its refusing to build in prod.

[Augustine-edeh]

Facing a same issue. I wouldn't recommend --force or --legacy-peer-deps. They both seem to work in the development server but break builds in production

[Noble-247]

npm i @paystack/inline-js

This work-around worked for me

[CaptainEboy]

To those still having this issue in 2025.

Here is a solution that works

Use @paystack/inline-js instead

by runing npm i @paystack/inline-js

If you're using typescript, Use // @ts-ignore to fix the compiler error like this

// @ts-ignore - no type declarations for @paystack/inline-js import PaystackPop from '@paystack/inline-js';

OR

Create a custom type declaration file at src/types/paystack-inline-js.d.ts and add the code below to it

// src/types/paystack-inline-js.d.ts

declare module '@paystack/inline-js' { // Defines the configuration object for a Paystack transaction. export interface PaystackTransactionConfig { key: string; // Your Paystack public key email: string; // Customer email amount: number; // Amount in kobo (e.g., ₦5000 should be 500000) currency?: string; // Default: 'NGN' ref?: string; // Optional unique transaction reference metadata?: Record<string, any>; onSuccess: (transaction: { reference: string; [key: string]: any }) => void; onClose: () => void; [key: string]: any; // Allow for other potential properties }

// Declares the PaystackPop class and its method. export default class PaystackPop { newTransaction(config: PaystackTransactionConfig): void; } }

This would fix any errors you're encountering.

Don't forget to upvote if it also works for you so others can use it.

Thanks