[Bug?]: SSR / Hydration Mismatch for solid start + Ark UI + Panda CSS Project (Stackblitz example included)

[brianfeister]

Originally posted on the solid start repo here, I think this might be a park UI issue.

Mentioned in my comment here as well: #128 (comment)

Current behavior 😯

There is a working example of solid-start + Ark UI + Panda CSS provided in the Park UI lib here:
https://github.com/cschroeter/park-ui/tree/main/examples/panda/solid/solid-start

This project loads without issue both in stackblitz and also when I run the project locally.

When I make some minor modifications to include the ark ui datepicker component (with Panda CSS recipes) in this demo stackblitz, the project loads without issue.

Here is a live demo in Stackblitz:
https://stackblitz.com/edit/github-ivec47?file=src%2Froutes%2Findex.tsx%3AL11,src%2Fcomponents%2Fui%2Fdate-picker.ts

Here is the forked source where I've introduced the change in my github fork
https://github.com/brianfeister/park-ui/tree/solid-example-wip/examples/panda/solid/solid-start

The Stackblitz above works! (🎉 ) ... but when I run the same code locally, I get the following error:

Stepping through this in Chrome Debugger, I see the getNextElement() function (in the erroring component) yielding a getHydrationKey() of 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-2-0-0-1-0-0-0-0-2-0-2 but searching the DOM in the elements tab yields no matching key in the DOM which seems suspect

Expected behavior 🤔

Cloning the repo https://github.com/brianfeister/park-ui/tree/solid-example-wip/examples/panda/solid/solid-start and running npm i && npm run dev from this directory should execute successfully

Steps to reproduce 🕹

Steps:

1. git clone git@github.com:brianfeister/park-ui.git && git checkout solid-example-wip
2. cd park-ui/examples/panda/solid/solid-start && npm i && npm run dev
3. Open localhost:3000
4. Hydration error ⚠️

Context 🔦

No response

Your environment 🌎

System:
  Mac OS Sonoma 14.1.2
Dep Versions:
  https://github.com/brianfeister/park-ui/blob/solid-example-wip/examples/panda/solid/solid-start/package.json

[bfeister]

@cschroeter this has received from feedback on the solid-start side from creator @ryansolid if you have any ideas. I can submit a PR to fix the example + upgrade to the new @solidjs/start@0.4.0 with some guidance

solidjs/solid-start#1174

[cschroeter]

@brianfeister
This should be fixed by now.