App/[uid]/page.tsx Error

[solution.stack99]

I develop a website in Next.js. Below are folders in the app folders and the resolver in the prismicio.ts file.

The error shows that can't find a module.

app/[uid]/page.tsx

prismicio.ts

Error

I am going to launch the site and this issue needs to be resolved.

I appreciate your help!

[nf_mastroianni (Neil)]

I think we need more information on your page.tsx file. in particular, it would be good to see your generateStaticParams function

[solution.stack99]

Thank you for helping!

If you mean page.tsx in app/[uid]/, here is the code.

[nf_mastroianni (Neil)]

Upon second glance, I see now that your console error shows an issue with your generateMetadata function. To troubleshoot this, I’d comment out the whole function and/or ensure that the page I’m trying to visit has a meta_title and a meta_description saved and published in Prismic. Perhaps you could provide a fallback if these fields are not filled out.
Here’s my generateMetadata function for an idea:

export async function generateMetadata({
  params,
}: {
  params: Params
}): Promise<Metadata> {
  const client = createClient()
  const page = await client.getByUID('page', params.uid).catch(() => notFound())
  const settings = await client.getSingle('settings')

  return {
    title: `${prismic.asText(page.data.title) || page.data.meta_title} • ${
      settings.data.site_title
    }`,
    description:
      page.data.meta_description || settings.data.site_meta_description,
    openGraph: {
      images: [
        page.data.meta_image.url || settings.data.site_meta_image.url || '',
      ],
    },
    alternates: {
      canonical: page.url,
    },
  }
}

[solution.stack99]

Sorry for the delay.

For some reason, the error hasn't shown anymore but I added const = settings and in return
I appreciate your help!

[solution.stack99]

Hi,

I apologize for opening this question again.

This error happens from time to time again. If I comment out this function below, I can see that a meta tags generates the default value from settings from app/page.tsx

However, this generateMetadata function that shows an error is in app/[uid]/page.tsx

export async function generateMetadata({
  params,
}: {
  params: Params;
}): Promise<Metadata> {
  const client = createClient();
  const page = await client
    .getByUID("page", params.uid)
    .catch(() => notFound());
  const settings = await client.getSingle("settings");

  return {
    metadataBase: new URL("https://acme.com"),
    alternates: {
      canonical: "/",
      languages: {
        "en-US": "/en-US",
        "de-DE": "/de-DE",
      },
    },
    title: page.data.meta_title || settings.data.site_tile || "Website",
    description:
      page.data.meta_description ||
      settings.data.mata_description ||
      "Website",
    openGraph: {
      images: [
        {
          url: page.data.meta_image.url || settings.data.og_image.url || "",
        },
      ],
    },
  };
}

[solution.stack99]

I noted this error was showing on any dynamic page app/[uid]/page.tsx or app/for-engineer/[uid]/page.tsx etc.

Would you be able to help me figure out? @Phil

[Pau]

Since the function is asyn, any unhandled promise rejection within it can cause the function to break and error out. You could wrap your data-fetching calls in try/catch blocks to and run a debug line by line to see where to error actually is