Hydration failed: initial UI mismatch.

Issues
1

Has anyone encountered this error? Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <a>.

See more info here: <https://nextjs.org/docs/messages/react-hydration-error>

2

it is likely you have nested anchor tags. In the browser console, try document.querySelectorAll("a a") and find them; nested anchor tags are invalid and can lead to hydration issues :pensive:

3

All the code so far has caome from Plasmic Studio.
I only have the Plasmic host and catchall pages so far. Would the nested a tags be in one of those files? @chungwu

4

it should be in Plasmic. So I would run document.querySelectorAll("a a") on the website, locate where the offending link element is, find the corresponding page in Plasmic studio, and fix it there

5

This is what I found. How do I modify this in Plasmic?

image.png
image.png1748×524 105 KB

6

So basically, the issue we are currently facing is a hydration error on the home page. The hydration error does not happen in any other part of the application. I will drop a code snapshot of [[catchAllPage]] so that you take a look.

import * as React from “react”;
import {
PlasmicComponent,
extractPlasmicQueryData,
ComponentRenderData,
PlasmicRootProvider,
} from “@plasmicapp/loader-nextjs”;
import type { GetStaticPaths, GetStaticProps } from “next”;

import Error from “next/error”;
import { useRouter } from “next/router”;
import { PLASMIC } from “@/plasmic-init”;

export default function PlasmicLoaderPage(props: {
plasmicData?: ComponentRenderData;
queryCache?: Record<string, any>;
}) {
const { plasmicData, queryCache } = props;
const router = useRouter();
if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
return ;
}
const pageMeta = plasmicData.entryCompMetas[0];
return (
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
prefetchedQueryData={queryCache}
pageParams={pageMeta.params}
pageQuery={router.query}

>
  <PlasmicComponent component={pageMeta.displayName} ></PlasmicComponent>
</PlasmicRootProvider>

);
}

export const getStaticProps: GetStaticProps = async (context) => {
const { catchall } = context.params ?? {};
const plasmicPath = typeof catchall === ‘string’ ? catchall : Array.isArray(catchall) ? /${catchall.join('/')} : ‘/’;
const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
if (!plasmicData) {
// non-Plasmic catch-all
return { props: {} };
}
const pageMeta = plasmicData.entryCompMetas[0];
// Cache the necessary data fetched for the page
const queryCache = await extractPlasmicQueryData(
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
pageParams={pageMeta.params}

>
  <PlasmicComponent component={pageMeta.displayName} />
</PlasmicRootProvider>

);
// Use revalidate if you want incremental static regeneration
return { props: { plasmicData, queryCache }, revalidate: 60 };
}

export const getStaticPaths: GetStaticPaths = async () => {
const pageModules = await PLASMIC.fetchPages();
return {
paths: pageModules.map((mod) => ({
params: {
catchall: mod.path.substring(1).split(“/”),
},
})),
fallback: “blocking”,

};
}

7

If you hover over the printed elements in the js console, it should highlight where they are on the page. You can then open the corresponding component in Plasmic, and fix it there