Error: Unsupported Server Component type: undefined

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

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.

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

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.

this is the repo incase anyone want to check it out

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.

1 Like

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