Prismic with nextjs getsingle, unknown type

Developing with Prismic
1

I have getStaticProps functions on my homepage and news page to fetch single pages which always worked. But then I added a page with getServerSideProps and now nothing works not even my homepage which always did work.

Here is the fetch function for the homepage which I never changed

export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData })

  const page = await client.getSingle('homepage')

  return {
    props: {
      page,
    },
  }
}

Here is the error message:

Screenshot 2023-03-27 at 14.23.19
Screenshot 2023-03-27 at 14.23.19943×499 34.9 KB

3

Hello @bjornandrip

Welcome to the Prismic community, and thanks for reaching out to us.

This error usually comes when you conflict between the name of types in your linkresolver or routeResolver function and the name given in Prismic docs. Can you paste the link resolver function and the name of your repo? You can send a repo name by private message.

Thanks,
Priyanka

4

Do you mean this?

import * as prismic from '@prismicio/client'
import * as prismicNext from '@prismicio/next'
import sm from './sm.json'

/**
 * The project's Prismic repository name.
 */
export const repositoryName = prismic.getRepositoryName(sm.apiEndpoint)

// Update the routes array to match your project's route structure
/** @type {prismic.ClientConfig['routes']} **/
const routes = [
  {
    type: 'homepage',
    path: '/',
  },
  {
    type: 'page',
    path: '/:uid',
  },
]

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config {prismicNext.CreateClientConfig} - Configuration for the Prismic client.
 */
export const createClient = (config = {}) => {
  const client = prismic.createClient(sm.apiEndpoint, {
    routes,
    ...config,
  })

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  })

  return client
}

Do you mean my repo on prismic?

5

@bjornandrip Can you share the file system-based router of your project?

6

How and where do I do that? I am using nextjs so it's just the pages directory.
I just have files in the pages directory called index, about, news etc.

7

@bjornandrip I meant the folder structure along with the file and folder names under /pages. Can you share this with me?

8

Screenshot 2023-03-30 at 16.45.42

9

Hello @bjornandrip

It's difficult to troubleshoot for me with the provided information. Can you share your github repo in a private message?

Thanks,
Priyanka

10

Hello @bjornandrip

I have checked your code and repository.
To run the code correctly, you need to remove the page route from the prismic.io file because your repository doesn't have any page Custom Type. The correct routes is:

const routes = [
  {
    type: 'homepage',
    path: '/',
  },
]

Give this a try, and let me know.

Thanks,
Priyanka

1 Like
12

This worked thank you so much!

13

Great @bjornandrip. I am happy to help you. Feel free to reach out to us if you have any questions.

15

Hey, a similar issue happened to us today. We added a new customType and immediately the client functions stopped working because of the that error - Unknown type.

The solution was kind of unexpected - we needed to publish the first document of that type (even though we have the preview for drafts configured).

It seems like a bug to me. It should accept the valid customType value even if there are no documents of that type published. Otherwise any content editor can break the whole website if they remove all docs of any type (which is a rare scenario, but completely realistic and valid from the content editor perspective).

17

Hello @szd

Your repository Custom Type name and your routes should match each other. The routes and API only have the published documents. To get to work, you need to publish the docs if you added them in the routes.

Thanks,
Priyanka

19

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:

  • On the browser:
# Unhandled Runtime Error
Error: [Link resolver error] Unknown type Declared type: blog Expected one of: <blank>
  • On the terminal
- 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,

20

Hi @gbrobbe ,

Welcome to the community!

It sounds like you're experiencing the same situation as the user above:

Have you published a blog document?

23

Indeed I just needed to publish the first content. Thank very much

1 Like