Hydration error from using SliceZone

Developing with Prismic
1

Hi,
I took the example starter repository for Next.js and Prismic and made a simple multi-language page which shows some news/blog articles on the first page. The code is nearly identical with the code at GitHub - prismicio-community/nextjs-starter-prismic-blog: Blog project with Next.js & Prismic.

When developing local and reloading my start page, I get an hydration error after the page is loaded ("Error: Hydration failed because the initial UI does not match what was rendered on the server.").

I commented a lot of code out to see what triggers this error and I managed to pin it down to a single component.

This is my current code:

import Head from "next/head";
import { PrismicText } from "@prismicio/react";
import { SliceZone } from "@prismicio/react";
import * as prismicH from "@prismicio/helpers";

import { Bounded } from "../components/Bounded";
import { createClient } from "../prismicio";
import { Layout } from "../components/Layout";
import { components } from "../slices";

const dateFormatter = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  year: "numeric",
});

const News = ({ news }) => {
  const date = prismicH.asDate(news.data.publishdate);
  return (
    <li className="font-bold font-josefin text-[18px]">
      <div className="mx-auto w-full text-center">
        <h3>{dateFormatter.format(date)}</h3>
        <h1>
          <PrismicText field={news.data.title} />
        </h1>

        <SliceZone slices={news.data.slices} components={components} />
      </div>
    </li>
  );
};

const Index = ({ page, navigation, footerNavigation, settings, news }) => {
  return (
    <Layout
      alternateLanguages={page.alternate_languages}
      navigation={navigation}
      footerNavigation={footerNavigation}
      settings={settings}
    >
      <Head>
        <title>{prismicH.asText(page.data.title)}</title>
      </Head>

      <div className="flex justify-center md:mt-[700px] md:mb-60">
        <h1 className="text-[80px] font-sunday">News</h1>
      </div>

      <Bounded yPadding="sm" className="py-4 md:py-4">
        <ul className="grid grid-cols-1 gap-16">
          {news.map((news) => (
            <News key={news.id} news={news} />
          ))}
        </ul>
      </Bounded>
    </Layout>
  );
};

export default Index;

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

  const page = await client.getByUID("page", "home", { lang: locale });
  const navigation = await client.getSingle("navigation", { lang: locale });
  const footerNavigation = await client.getSingle("footernavigation", {
    lang: locale,
  });
  const settings = await client.getSingle("settings", { lang: locale });

  const news = await client.getAllByType("news", {
    lang: locale,
    orderings: [{ field: "my.news.publishdate", direction: "desc" }],
  });

  return {
    props: {
      page,
      navigation,
      footerNavigation,
      settings,
      news,
    },
  };
}

The "news" articles are passed to the Index component, which maps over the news, shows the News component which makes use of a SliceZone to pass all slices.
If I comment out the <SliceZone slices={news.data.slices} components={components} />, the hydration error is gone. This component is part of the @prismicio/react lib, so I'm not sure how I can proceed now.

Any suggestions on how to debug this now?

Thanks

2

Hi Rob,

Welcome to the community!

I think the issue is that your are returning 2 different variables called news both from the getStaticProps and then mapping then again when you map news as news:

{news.map((news) => (
  <News key={news.id} news={news} />
))}
5

This solved my issue:

const SliceZone = dynamic(() => import('@prismicio/react').then((module) => module.SliceZone));

Also, do not use inside

tag.