Repository navigation
react-paystack Incompatibility with React 19 #117
Description
Attempting to install react-paystack@6.0.0 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: studyai@0.1.0
npm ERR! Found: react@19.0.0
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 react-paystack@6.0.0
npm ERR! node_modules/react-paystack
npm ERR! react-paystack@"*" from the root project
Activity
ultimatekristency commentedon Mar 18, 2025
i'm having same isssue, find solution to it?
femakin commentedon Mar 19, 2025
@ultimatekristency Not yet
Ibeenoch commentedon Apr 16, 2025
same here, and i don't intend to use --legacy-peer-dependencies which could cause issues during production
MY-KHEL commentedon Apr 20, 2025
Will deep force work?
Ibeenoch commentedon Apr 20, 2025
deep force will work, but it is not recommended, as this will give issues during production.
There's two workaround to fix this:
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.
Second way around this is to load the paystack inline script https://paystack.com/docs/developer-tools/inlinejs/
inside-aims commentedon Apr 25, 2025
@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 commentedon May 9, 2025
I'm also having the same issue.
Ibeenoch commentedon May 9, 2025
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 commentedon May 31, 2025
I am also facing the same issue, I tried --legacy but its refusing to build in prod.
Augustine-edeh commentedon Sep 30, 2025
Facing a same issue. I wouldn't recommend
--forceor--legacy-peer-deps. They both seem to work in the development server but break builds in productionNoble-247 commentedon Oct 9, 2025
This work-around worked for me
CaptainEboy commentedon Nov 3, 2025
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
alimancs commentedon Dec 11, 2025
Use Paystack-react-lite instead compatible with react-18 and above https://github.com/alimancs/paystack-react-lite . React-Paystack doesn't seem to maintained regularly
engrukairo commentedon Jan 8, 2026
Great job there @alimancs
I've forked the repo to make it work for NextJS, using Typescript. See the further sample codes to set up the system at https://github.com/engrukairo/nextjs-paystack-react-lite
alimancs commentedon Jan 8, 2026
Thanks, I appreciate the effort you put into this.
Just to clarify,
paystack-react-liteis already written in TypeScript and works with Next.js (both Pages and App Router). Your repo provides an alternative implementation with additional Next.js-focused examples and setup patterns, which is useful from a DX perspective.I’ll add a reference to it in the README under community implementations so users can explore it if it fits their needs. Nice work.
lengolearnonline-droid commentedon May 5, 2026
Hey femakin,
You are hitting this because the react-paystack maintainers haven't bumped their peer dependencies to support the new React 19 compiler yet.
You can force the installation and bypass the error right now by adding the legacy flag. Run this in your terminal:
npm install react-paystack --legacy-peer-deps
An architectural heads-up, though:
Relying on frontend UI wrappers for payment gateways is incredibly risky for scaling SaaS because of exactly this issue—they always lag behind major framework updates and create dependency locks.
At our agency, we completely stopped using the react-paystack frontend package. Instead, we shifted all Paystack initialization and webhook listening to the backend using Supabase Deno Edge Functions. It completely decouples your billing logic from React's versioning.
We actually just extracted our internal React/Supabase architecture (with the backend Paystack Edge Functions already pre-wired) into a boilerplate for local devs. I recorded a 3-minute video breaking down how we built the backend to avoid these dependency conflicts: [https://drive.google.com/file/d/1ce4dZ91Tz76JFsDn5a0sKboPyg9jLNXg/view?usp=drive_link]
Hope the --legacy-peer-deps command unblocks your build today!
aberba commentedon Aug 6, 2026
Find a compatible solution here: #119 (comment). No major code change required