dynamicio build issue
Unanswered
Southeastern blueberry bee posted this in #help-forum
Southeastern blueberry beeOP
I get this error when building:
but the component is already wrapped into suspense:
A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspensebut the component is already wrapped into suspense:
export default function Page({ params }: { params: Promise<{ slug: string }> }) {
return (
<Suspense>
<SuspensedDeploymentsPage params={params} />
</Suspense>
);
}
async function SuspensedPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
return (
<div className="h-full flex justify-center items-center py-4">
<ClientComponent title={slug} />
</div>
);
}23 Replies
Asian swamp eel
@Southeastern blueberry bee did you ever find a solution to this? I'm stuck rn on the same thing. following the docs doesnt help and idk what to do.
Asian swamp eel
I'm on
"next": "15.2.0-canary.1"Southeastern blueberry beeOP
This was caused by usePathname this hook cannot be used inside an rsc that is in a dynamic route. Try to remove this hook and retry
Asian swamp eel
but I'm not using usePathname
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const slug = (await params).slug;
return <div>My Post: {slug}</div>;
}I get the error when building
Error: Route "/v/[slug]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspenseAsian swamp eel
odly enough this error only goes out when using canary. i'll just rollack to not using "use cache"
@Southeastern blueberry bee This was caused by usePathname this hook cannot be used inside an rsc that is in a dynamic route. Try to remove this hook and retry
No, just wrap the Client component in <Suspense> too, when you’re importing it in a server component
@Asian swamp eel ts
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const slug = (await params).slug;
return <div>My Post: {slug}</div>;
}
Are you wrapping the page in <Suspense> via loading.tsx?
@Asian swamp eel but I'm not using usePathname
Southeastern blueberry beeOP
For me the usePathname was used inside the layout.tsx not the page.tsx
@luis_llanes No, just wrap the Client component in <Suspense> too, when you’re importing it in a server component
Southeastern blueberry beeOP
No that’s was not the issue please read the full op post
@luis_llanes Are you wrapping the page in <Suspense> via loading.tsx?
Asian swamp eel
i dont have loading.tsx. i never read anywhere in the documentation that having i was required a loading.tsx to use params
@Asian swamp eel ts
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const slug = (await params).slug;
return <div>My Post: {slug}</div>;
}
Asian swamp eel
using the same code in 15.1.4 builds but when using next@canary it doesnt
Loading.tsx is effectively a <Suspense> wrapper around your page
You need to wrap your dynamic components in <Suspense> via manually wrapping it in <Suspense> or letting the framework do it via loading.tsx
Asian swamp eel
is this a new thing on canary?
@Southeastern blueberry bee No that’s was not the issue please read the full op post
are you wrapping the page in suspense? In either way of the mentioned above
@Asian swamp eel is this a new thing on canary?
What exactly?
- Loading.tsx has always been a suspense boundary around your page
- async APIs like params, searchParams, cookies and headers are now async, they return a promise so they need to be awaited, and now if you have a dynamic component (thanks to dynamic io) you need to wrap them in suspense or mark them with “use cache”
- Loading.tsx has always been a suspense boundary around your page
- async APIs like params, searchParams, cookies and headers are now async, they return a promise so they need to be awaited, and now if you have a dynamic component (thanks to dynamic io) you need to wrap them in suspense or mark them with “use cache”
@luis_llanes are you wrapping the page in suspense? In either way of the mentioned above
Southeastern blueberry beeOP
Yeah
Asian swamp eel
what im trying to figure out is why this code builds when using
next@15.1.4 but fails to build when using next@canaryexport default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const slug = (await params).slug;
return <div>My Post: {slug}</div>;
}Southeastern blueberry beeOP
Do you have any online reproduction
Repository or sandbox
But yeah that’s strange I thing that you should create a github issue since it’s breaking on canary only