hi guys please i need help at my next.js vercel deployment error
Answered
Ocicat posted this in #help-forum
OcicatOP
hi i have a ecommerce nextjs project where i use stripe for payment and every thing is working perfectly in localhost but when i make deploy to vercel i got a error
"use client";
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
/// my code of stripe here i delete it because the characters is limited to make a post ////
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
and this is the error i got
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/checkout". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/vercel/path0/.next/server/chunks/947.js:167:13940)
at m (/vercel/path0/.next/server/chunks/947.js:167:27936)
at z (/vercel/path0/.next/server/app/checkout/page.js:1:14537)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47422)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nI (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46809)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47573)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61666)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67660)
Error occurred prerendering page "/checkout". Read more: https://nextjs.org/docs/messages/prerender-error
someone can help me please
"use client";
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
/// my code of stripe here i delete it because the characters is limited to make a post ////
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
and this is the error i got
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/checkout". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/vercel/path0/.next/server/chunks/947.js:167:13940)
at m (/vercel/path0/.next/server/chunks/947.js:167:27936)
at z (/vercel/path0/.next/server/app/checkout/page.js:1:14537)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47422)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nI (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46809)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47573)
at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61666)
at nL (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64677)
at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67660)
Error occurred prerendering page "/checkout". Read more: https://nextjs.org/docs/messages/prerender-error
someone can help me please
Answered by Oak saucer gall
The suspense around the component that use useSearchParams not inside it
11 Replies
Oak saucer gall
The suspense around the component that use useSearchParams not inside it
Answer
OcicatOP
thank you for helping but how can you explain more ?
@Ocicat thank you for helping but how can you explain more ?
Oak saucer gall
what the name of the component that has useSearchParams
OcicatOP
"use client";
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
export default function checkout() {
const searchParams = useSearchParams();
const options = {
mode: "payment",
currency: "usd",
amount: Number(searchParams.get("amount")) * 100,
};
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHER_KEY
);
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
import React, { Suspense } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "../_chcomponents/CheckoutForm";
import { useSearchParams } from "next/navigation";
export default function checkout() {
const searchParams = useSearchParams();
const options = {
mode: "payment",
currency: "usd",
amount: Number(searchParams.get("amount")) * 100,
};
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHER_KEY
);
return (
<Suspense fallback={<div>Loading...</div>}>
<Elements stripe={stripePromise} options={options}>
<CheckoutForm amount={Number(searchParams.get("amount"))} />
</Elements>
</Suspense>
);
}
Oak saucer gall
typescript
<Suspense fallback={<div>Loading...</div>}><Checkout/></Suspense>checkout component or page
OcicatOP
page.jsx
Oak saucer gall
you should put useSearchParams in component
and remove "use client"; from the page
OcicatOP
thank you very much i understand
okay you are the best thank you very much