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!
I think we need more information on your page.tsx file. in particular, it would be good to see your generateStaticParams function
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,
},
}
}
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!
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 || "",
},
],
},
};
}
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
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
I tried this try/catch blocks
export async function generateMetadata({
params,
}: {
params: Params;
}): Promise<Metadata> {
const client = createClient();
let page = null;
try {
page = await client.getByUID("for_engineers_subpage", params.uid);
} catch (error) {
console.error("Error fetching page metadata:", error);
}
if (!page) {
return notFound();
}
return {
title: page.data.meta_title,
description: page.data.meta_description,
openGraph: {
images: [
{
url: page.data.meta_image.url || "",
},
],
},
};
}
Here is an output.
Was drawer.css.map cause this error? I am not really sure. I am stuck with this error for a while.
Thank you, appreciate your help!
@solution.stack99 Have you tried finding this document with that UID in your API browser? You can test the query there first to ensure you're calling it correctly
Yes, there were data returns. However, this error wasn't shown when I opened it incognito.
Any ideas?
It might still be the cache in your regular browser session. You might need to clear them and check if any extensions or plugins could be messing with queries.
