Hydration error when publishing a Plasmic page

Developer Support
1

Hydration Error

2

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: <https://nextjs.org/docs/messages/react-hydration-error>
Call Stack
throwOnHydrationMismatch
node_modules\react-dom\cjs\react-dom.development.js (12507:0)
popHydrationState
node_modules\react-dom\cjs\react-dom.development.js (12678:0)
completeWork
node_modules\react-dom\cjs\react-dom.development.js (22176:0)
completeUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26596:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26568:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25738:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)

3

I have a Layout file calling two Plasmic Components

4

import {
PlasmicRootProvider,
PlasmicComponent,
ComponentRenderData,
extractPlasmicQueryData
} from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../../plasmic-init';

// Statically fetch the data needed to render Plasmic pages or components.
export async function getStaticProps({ params }) {
// You can pass in multiple page paths or component names.
const plasmicData = await PLASMIC.fetchComponentData('Header, Footer');
if (!plasmicData) {
throw new Error('No Plasmic design found');
}

// Cache the necessary data fetched for the page
const queryCache = await extractPlasmicQueryData(
<PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
<PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
</PlasmicRootProvider>
);
return {
props: {
plasmicData,
queryCache
// ...
},

`// Using incremental static regeneration, will invalidate this page`
`// after 300s (no deploy webhooks needed)`
`revalidate: 300`

};
};

export default function Layout( props: { plasmicData: ComponentRenderData; queryCache?: Record<string, any> },{ children } )
{
return (
<PlasmicRootProvider loader={PLASMIC} prefetchedData={props.plasmicData} prefetchedQueryData={props.queryCache}>
<div style={{display:'flex', alignItems:'stretch', flexDirection:'column'}}>
<PlasmicComponent component="Header" />
<div>{children}</div>
<PlasmicComponent component="Footer" />
</div>
</PlasmicRootProvider>
)
}

5

And a [[CachaAll… page. Whatever I try, I seem unable to fix this Hydratio error…

6

[[…catchall]] **

7

Not sure if it’s this specific issue but one common reason for this is if the page contains some problematic content such as nested anchor links or nested buttons. Does this happen to you for other pages, such as if you start a new blank page?

8

The homepage “/” is the blank page that Plasmic generates with header and text

9

Just tried other pages and a completely blank page, still an issue

10

At first glance, your code seems okay… Do you see the problem if you use the code exactly from the quickstart or run create-plasmic-app?

11

My original project followed the quickstart and I just re-created the project with create plasmic-app. Still the same problem

12

Attn @samuel

13

Hey @vocational_aphid! Can you DM your me your project id please?

14

Hi! I just created a new blank project in Plasmic, published it, and stood up the codebase with yarn create plasmic-app (TypeScript, Next.js), and got this exact same error after yarn dev with no customizations whatsoever.

Did this get solved?