dynamicio build issue

[lucid breach]

I get this error when building:

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-suspense

but 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>
  );
}

[tropic grove]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[open dagger]

@lucid breach 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.

I'm on "next": "15.2.0-canary.1"

[lucid breach]

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

[open dagger]

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-suspense```

[open dagger]

odly enough this error only goes out when using canary. i'll just rollack to not using "use cache"

[pulsar ruin]

No, just wrap the Client component in <Suspense> too, when you’re importing it in a server component

[pulsar ruin]

Are you wrapping the page in <Suspense> via loading.tsx?

[lucid breach]

For me the usePathname was used inside the layout.tsx not the page.tsx

[lucid breach]

No that’s was not the issue please read the full op post

[open dagger]

i dont have loading.tsx. i never read anywhere in the documentation that having i was required a loading.tsx to use params

[open dagger]

using the same code in 15.1.4 builds but when using next@canary it doesnt

[pulsar ruin]

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

[open dagger]

is this a new thing on canary?

[pulsar ruin]

are you wrapping the page in suspense? In either way of the mentioned above

[pulsar ruin]

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”

[lucid breach]

Yeah

[open dagger]

what im trying to figure out is why this code builds when using [email protected] but fails to build when using next@canary

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const slug = (await params).slug;
  return <div>My Post: {slug}</div>;
}

[lucid breach]

Do you have any online reproduction

Repository or sandbox