Error: Unsupported Server Component type: undefined

Prismic Administrative Support
1 
import { createClient } from "@/prismicio";
import * as prismic from "@prismicio/client";
import { SliceZone } from "@prismicio/react";
import { components } from "@/slices";

const queryHomepage = () => {
	const client = createClient();
	return client.getSingle("homepage");
};

export async function generateMetadata() {
	const page = await queryHomepage();

	return {
		openGraph: {
			title: page.data.meta_title,
			description: page.data.meta_description,
			images: prismic.asImageSrc(page.data.meta_image),
		},
	};
}

export default async function Home() {
	const page = await queryHomepage();

	return (
		<main>
			<SliceZone slices={page.data.slices} components={components} />
		</main>
	);
}

I am currently following the academy tutorials for next js and getting this Error: Unsupported Server Component type: undefined

I am at this stage of the course. the error itself isn't very descriptive

2

Hi @stevefernandes24 ,

I'm not 100% certain why you'd get this error. I've not seen this error myself. However, I wonder if you'd be willing to try the following just to see if it helps.

Instead of abstracting your query to a separate function, replace it with the code below:

export default async function Home() {
  const client = createClient()
  const page = await client.getSingle('homepage')
  console.log('Page Slices --> ', page.data.slices)
  return (
		<main>
			<SliceZone slices={page.data.slices} components={components} />
		</main>
  )
}

Hopefully, the log will show you all your slices and you can inspect what you're getting back from Prismic. I hope that helps some.

3

Hi @nf_mastroianni ,

thanks for the response, have tried that and still not working, the thing is I can see the console log but
I get this error still

Screenshot 2024-04-08 at 15.21.33
Screenshot 2024-04-08 at 15.21.33963×862 70 KB

4

I have also upgraded next js to the latest version, still not finding the issue, it does not like the SliceZone component for some reason.

5

this is the repo incase anyone want to check it out

6

I found "the bug :beetle: "

Go to your /slices/TextSlice/index.js file

change your import from import PrismicRichText from '@prismicio/react' to import { PrismicRichText } from '@prismicio/react'

That should solve the issue @stevefernandes24 . Let us know if it helped.

2 Likes
7

wow ... thank you so much I cannot believe this, such a rookie mistake! thank you for taking the time to help on this

1 Like