Hydration error

Issues
1

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:

2

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.

3

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?

Screenshot 2024-06-08 at 9.31.20 PM
Screenshot 2024-06-08 at 9.31.20 PM576×926 51.7 KB

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

:blush:

4

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?

5

Hi @icaro_guerra I am grateful for your response and my apologies for the late response. I see that extractPlasmicQueryData isn’t called inside the catchall page. We are using loader.

I’ll look into fixing the problem. Any hints on how to fix it would be appreciated.

The issue is on a few paths but the most important are

  1. /multiplechoice
  2. /singleword

Thank you very much

6

Hi, you can use the left sidebar to find all the places that contain invalid structures. If you have h1 inside h2, you can remove one of them and keep only the intended one for your design. You can keep removing until no issues related to rendering appear in the left sidebar.
Issues tab

7

I am grateful @fmota! :raised_hands: