[Bug]: .'Paddle' is not exported from '@paddle/paddle-js' (imported as 'Paddle').
pushkarsingh32 opened this issue · comments
What happened?
was working with paddle js client in nextjs javascript app router version
when ever I go to the payment page it is showing error on the backend. Thought things are working properly on the fronten. I want to make sure Everything is working as expected in prouduction without an issue.
Steps to reproduce
'use client';
import { useAuth } from '@/Context/auth';
import PricingGrid from '@/components/Pricing/PricingGrid';
import PricingToggle from '@/components/Pricing/PricingToggle';
import { initializePaddle } from '@paddle/paddle-js';
import { useEffect, useState } from 'react';
const PaymentPageClient = () => {
let promise;
const [yearly, setYearly] = useState(true);
const [loading, setLoading] = useState({});
const { session: supabaseSession } = useAuth();
// const router = useRouter();
// router.prefetch('/thank-you');
const customerEmail = supabaseSession?.user?.email;
const userId = supabaseSession?.user?.id;
let [paddle, setPaddle] = useState(null);
console.log("PaymentPageClient paddle: ", paddle);
// Download and initialize Paddle instance from CDN
useEffect(() => {
const clientSideToken = process.env.NEXT_PUBLIC_CLIENT_SIDE_TOKEN;
initializePaddle({
environment: 'sandbox',
token: clientSideToken,
vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
checkout: {
settings: {
displayMode: "overlay",
theme: "light",
locale: "en",
allowLogout: false,
showAddDiscounts: false,
},
},
eventCallback: function (data) {
console.log("data: ", data);
if (data?.name === "checkout.closed") {
setLoading({});
}
}
}).then(
(paddleInstance) => {
if (paddleInstance) {
setPaddle(paddleInstance);
}
},
);
}, []);
return (
<div className=''>
<PricingToggle yearly={yearly} setYearly={setYearly} />
<PricingGrid yearly={yearly} paddle={paddle} customerEmail={customerEmail}
userId={userId} loading={loading} setLoading={setLoading} />
</div>
)
}
export default PaymentPageClient;
above is client page in nextjs
I am importing it in server page & rendering it on the frontend.
So similiar thing can be implemente for reproducing
What did you expect to happen?
The error shouldn't be there. I am not sure why we are importing Paddle if we are not using it
How are you integrating?
Nextjs app router "next": "^13.4.12",
Logs
./app/(route)/payment/page-client.jsx
Attempted import error: 'Paddle' is not exported from '@paddle/paddle-js' (imported as 'Paddle').
Import trace for requested module:
./app/(route)/payment/page-client.jsx
Thank you for taking the time to raise this issue.
I've tried creating a new next app and used your code but I couldn't recreate the error on the server or client side.
I am importing it in server page & rendering it on the frontend.
I am not sure what you mean by this, can you please share a repository where we can reproduce this error?
Thank you.
Closed as no response and unable to replicate. Reach out if we can still help.