Hi @Priyanka ,
Was wondering if you can save me lol. Or anyone else
I hope you're all doing well. I'm currently working on integrating Prismic into my Next.js project, and I've encountered an issue that I'm struggling to resolve.
I'm sending this in here as it relates to the question.
The error that I'm receiving:
# Unhandled Runtime Error
Error: [Link resolver error] Unknown type Declared type: blog Expected one of: <blank>
- error node_modules/@prismicio/client/dist/createClient.js (1172:14) @ Client.fetch
- error Error: [Link resolver error] Unknown type
Declared type: blog
Expected one of:
at async Module.generateMetadata (./src/app/blog/page.tsx:21:18)
digest: "598810741"
Here's a brief overview of my setup:
Setup Overview:
I'm using next
v13, with typescript
, @prismicio/react
package along with @prismicio/client
, @prismicio/next
, slice-machine-ui
, and @slicemachine/adapter-next
. My Blog
page is where I'm trying to retrieve and render content from Prismic, and I only intend to use Prismic in my blog section.
This is my ./src/app/blog/page.tsx file
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/src/prismicio";
import { components } from "@/src/slices/index";
const queryPage = () => {
const client = createClient();
return client.getSingle("blog");
}
export async function generateMetadata() {
const page = await queryPage();
return {
openGraph: {
title: page.data.meta_title,
description: page.data.meta_description,
}
}
}
export default async function Blog() {
const page = await queryPage();
return (
<div className="flex flex-col p-24 pt-32 bg-zinc-100">
<SliceZone slices={page.data.slices} components={components} />
</div>
)
}
Configuration:
I've set up my Prismic repository name in the configuration file, and I've defined a route for the "blog" type in the routes
array.
This is the routes array in my ./src/prismicio.ts file
...
const routes: prismic.ClientConfig["routes"] = [
{
type: "blog",
path: "/blog",
},
]
...
And my directory structure for pages currently is:
./src/app/
=> page (homepage)
=> web3
=> blog (the only page for now that I will use prismic on)
I'm a bit stuck at this point and could really use some guidance to understand what might be causing this error. If anyone has experience with Prismic and Next.js integration, I'd greatly appreciate it if you could take a look at my setup and offer some suggestions on how to troubleshoot and fix this issue.
If there's any additional information I can provide or if you need to see more of my code, please let me know. Thank you in advance for any help you can provide!
Best regards,