useSearchParams() should be wrapped in Suspense boundary
Answered
neon posted this in #help-forum
neonOP
I get this
but /servicing/new doesn't even use useSearchParams()
Contents of "app/servicing/new/page.tsx":
useSearchParams() should be wrapped in a suspense boundary at page "/servicing/new". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
but /servicing/new doesn't even use useSearchParams()
Contents of "app/servicing/new/page.tsx":
import React from "react";
import ServicingForm from "./ServicingForm";
import Heading from "@/components/Heading";
const NewServicingPage = () => {
return (
<div className="mx-4 my-8 flex min-h-svh flex-col items-center gap-6 md:mx-16 md:my-12 lg:mx-24 lg:my-16">
<div className="text-center">
<Heading>Book a Servicing</Heading>
<p className="text-muted-foreground text-base">
Register a servicing for your home appliance using the form below:
</p>
</div>
<div className="w-full max-w-lg md:max-w-2xl lg:max-w-3xl">
<ServicingForm />
</div>
</div>
);
};
export default NewServicingPage;
Answered by neon
Okay, it was a little stupid of me
It wasn't that any children in new/page.tsx used useSearchParams(), but actually a wrapper (NavigationWrapper) I had created which wraps the entire layout
It wasn't that any children in new/page.tsx used useSearchParams(), but actually a wrapper (NavigationWrapper) I had created which wraps the entire layout
8 Replies
Southeastern blueberry bee
suspense in next app are so broken especially when ppr is enabled
<ServicingForm /> dont use searchparams hook ?
neonOP
still unresolved, I opened an issue on github: https://github.com/vercel/next.js/issues/80254
@neon I get this `useSearchParams() should be wrapped in a suspense boundary at page "/servicing/new". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout`
but /servicing/new doesn't even use useSearchParams()
Contents of "app/servicing/new/page.tsx":
tsx
import React from "react";
import ServicingForm from "./ServicingForm";
import Heading from "@/components/Heading";
const NewServicingPage = () => {
return (
<div className="mx-4 my-8 flex min-h-svh flex-col items-center gap-6 md:mx-16 md:my-12 lg:mx-24 lg:my-16">
<div className="text-center">
<Heading>Book a Servicing</Heading>
<p className="text-muted-foreground text-base">
Register a servicing for your home appliance using the form below:
</p>
</div>
<div className="w-full max-w-lg md:max-w-2xl lg:max-w-3xl">
<ServicingForm />
</div>
</div>
);
};
export default NewServicingPage;
Chum salmon
Even though your new/page.tsx doesn't use useSearchParams() but some components down the tree might use it? Can you check? And make sure it's wrapped in <Suspense>
Especially the component <ServicingForm />
@Chum salmon Even though your new/page.tsx doesn't use useSearchParams() but some components down the tree might use it? Can you check? And make sure it's wrapped in <Suspense>
neonOP
Okay, it was a little stupid of me
It wasn't that any children in new/page.tsx used useSearchParams(), but actually a wrapper (NavigationWrapper) I had created which wraps the entire layout
It wasn't that any children in new/page.tsx used useSearchParams(), but actually a wrapper (NavigationWrapper) I had created which wraps the entire layout
Answer
neonOP
Thanks, @Chum salmon!