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

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
node_modules\react-dom\cjs\react-dom.development.js (14344:0)
node_modules\react-dom\cjs\react-dom.development.js (14357:0)
node_modules\react-dom\cjs\react-dom.development.js (20636:0)
node_modules\react-dom\cjs\react-dom.development.js (22373:0)



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

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.



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?

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.