[Bug]: .'Paddle' is not exported from '@paddle/paddle-js' (imported as 'Paddle').

[pushkarsingh32]

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

[vijayasingam-paddle]

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.

[kieran-paddle]

Closed as no response and unable to replicate. Reach out if we can still help.

[Amoki]

I have the same problem with vite.

npm i @paddle/paddle-js

import { initializePaddle, Paddle } from '@paddle/paddle-js';

In the console I got: SyntaxError: The requested module 'http://localhost:8080/node_modules/.vite/deps/@paddle_paddle-js.js?v=6a7432ef' doesn't provide an export named: 'Paddle'

Looking in node_modules/@paddle/paddle-js/dist/index.esm.js, Paddle is not exported:

export { CheckoutEventNames, CheckoutEventsPaymentMethodCardTypes, CheckoutEventsPaymentMethodTypes, CheckoutEventsStatus, CheckoutEventsTimePeriodInterval, getPaddleInstance, initializePaddle };

[pushkarsingh32]

Try

Keeping paddle outside of curly braces. They may be exporting it as default

[Amoki]

There is no default exports