Hydration error

Hi Plasmic team

I am getting the following hydration error.

Thank you in advance for all your assistance!

react-dom.development.js:7076 Uncaught 
Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:7076:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:7105:7)
    at updateHostComponent$1 (react-dom.development.js:16503:5)
    at beginWork$1 (react-dom.development.js:18390:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20461:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20510:16)
    at invokeGuardedCallback (react-dom.development.js:20585:29)
    at beginWork (react-dom.development.js:26763:7)
    at performUnitOfWork (react-dom.development.js:25587:12)
    at workLoopSync (react-dom.development.js:25303:5)
    at renderRootSync (react-dom.development.js:25258:7)
    at performSyncWorkOnRoot (react-dom.development.js:24727:20)
    at flushSyncWorkAcrossRoots_impl (react-dom.development.js:10274:13)
    at flushSyncWorkOnAllRoots (react-dom.development.js:10234:3)
    at commitRootImpl (react-dom.development.js:26194:3)
    at commitRoot (react-dom.development.js:25907:5)
    at commitRootWhenReady (react-dom.development.js:24627:3)
    at finishConcurrentRender (react-dom.development.js:24592:5)
    at performConcurrentWorkOnRoot (react-dom.development.js:24437:9)
    at workLoop (scheduler.development.js:261:34)
    at flushWork (scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

Relevant links:

Hello @aihe_team.

Can you check your Issues tab in the left tab and see if we are finding any issues in your project? You might want to fix those to see if they were causing hydration issues.

Another thing to check is if your extractPlasmicQueryData function is being called with the same render function as the page.

Hi @icaro_guerra

I’m grateful for the response. Here are some of the issues I’m seeing. There are a lot (I would say over 100). I have to solve them all then?

Regarding the render function, I have to look at the page a bit more to know to figure out what you mean.


You can try fixing the Invalid nesting type of issues first.

What is the page that is causing the hydration error?
The render function I mean is the extractPlasmicQueryData function that should be getting called inside your catchall page, if you’re using Loader. Are you using loader or codegen?