Seeing hydration error when running simple site on localhost:3000 but not in studio

Issues
1

Hi All,

I’m seeing this error when I run a simple site on localhost:3000, but not when I run from the studio.
I have cloned again from github and the problem persists.
I did go through the exercise of setting the host url via Plasmic Configuration, and same issue.

Any ideas on this?

1 of 3 unhandled errors

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Call Stack
throwOnHydrationMismatch
node_modules\react-dom\cjs\react-dom.development.js (14344:0)
tryToClaimNextHydratableInstance
node_modules\react-dom\cjs\react-dom.development.js (14357:0)
updateHostComponent$1
node_modules\react-dom\cjs\react-dom.development.js (20636:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (22373:0)

Thanks,

Mike

2

Hi Mike, can you share a bit more about what you are trying? Were you following some particular quick start?

3

Hi Yang,

Yes, I had a simple project created with the travel website template page. I also deployed a second page. I had deployed to github pages several times.

I had the project running locally on http://localhost:3000 with no errors.

I installed MUI from the terminal, committed and pushed back to the repo. The intent was to see how to register components. I reverted the last commit after I noticed the errors, but the issue persisted. I ran a synch command back to the project from the cli, and noticed the same. Really just working through to see how everything works.

Thanks,

Mike

4

Hi! Bumping this thread up as I’m experiencing the same issue – and frankly not sure how it’s possible to use Next.js + Plasmic without running into this.

I have a single page in Plasmic, zero props/dynamic elements, no custom components, barely any content at all. I started a new Next.js project with npx create-next-app@latest --ts and replaced the index.tsx page with the exact code provided in the Plasmic interface under “Render a single Plasmic page or component”. I’m really not sure it can possibly get simpler than this.

next dev produces a page with OP’s error in every browser I’ve tried. Doing a full build followed by starting the production server does not, and doing that as a development workflow is just awful.

This has been languishing a few months, but it’s hard to understand how anyone is using Next in conjunction with Plasmic without running into this. Any ideas?

5

Hi! I had the same issue on a fresh plasmic site based on the template Plasmic - Light SaaS landing page. Turned out there are two links in a button wrapped in a link (…) in a Footer section > Menu. I replaced Link tag with a span and the error disappeared.

I didn’t investigate the exact reason but I think the root is how react prerenders such cases.