Uncached data was accessed outside of <Suspense> With Params

[TheBikerAmir]

Summary

Hey I just try to Change My Component The way cached components must be but i got confused because its work fine during the dev but got break in build

according to this https://nextjs.org/docs/messages/blocking-route#params-and-searchparams

i create two component and pass params promises to the child component but got this
Error: Route "/[locale]/events/(..)events/[slug]": Uncached data was accessed outside of . This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/blocking-route
at ignore-listed frames
To get a more detailed stack trace and pinpoint the issue, try one of the following:

• Start the app in development mode by running next dev, then open "/[locale]/events/(..)events/[slug]" in your browser to investigate the error.
• Rerun the production build with next build --debug-prerender to generate better stack traces.
  Error occurred prerendering page "/[locale]/events/(..)events/[slug]". Read more: https://nextjs.org/docs/messages/prerender-error
  Export encountered an error on /[locale]/events/@modal/(..)events/[slug]/page: /[locale]/events/(..)events/[slug], exiting the build.
  ⨯ Next.js build worker exited with code: 1 and signal: null

Additional information

page.tsx

import { Suspense } from 'react';
import EventContent from './EventContent';

export default async function Page({ params }: PageProps<{ slug: string }>) {
  const data = params.then(p => ({ slug: p.slug }))

  return  (
    <Suspense fallback={<div>Loading...</div>}>
      <EventContent data={data} />
    </Suspense>
  );
}

------------------------------------------------------------------------------------------

EventContent.tsx

import { getEventBySlug } from '@/data-layer/datocms/getEvent';
import { notFound } from 'next/navigation';
import { EventDialog } from './EventDialog';

async function EventContent({ data }: { data: Promise<{ slug: string }> }) {
  const { slug } = await data;
  const event = await getEventBySlug(slug);
  if (!event) notFound();

  return <EventDialog event={event} />;
}

export default EventContent;

Example

No response

[icyJoseph]

Got a repo we could take a look at? or file system tree I could replicate somewhere else?

[TheBikerAmir]

Yes you can see this repo but its work with next 15

https://github.com/fullstacksjs/fullstacksjs

I do necessary things for upgrading like codemod, proxy, unstable prefix and...
But got stuck in this part

[icyJoseph]

do you mind pushing a branch/PR with the Next 16 migration? maybe we can get it through together