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

I think I finally cought it. This error had been hapenning here and there very inconsistently but I finally got to a case where I can reproduce the error 100% of the times. I think it has to do with how the SSR handles components inside of a route.

I created two routes. Both display a table using TankStank table The first one, I put the table directly into the function of the route, like so (simplified example):

export default function MyRoute(){
  return <table>
    <thead>
        ... 
    </thead>
  </table>;
}

It worked perfecly, no matter how many times I reload or change routes. It works as expected ✅

Then I took the exact same code, and I put the table inside a component like so:

function MyTable() {
  return <table>
    <thead>
        ... 
    </thead>
  </table>;
}

export default function MyRoute(){
  return <MyTable />;
}

Then it works the first time, but as soon as I hard refresh (Shif + Ctrl + R in Chrome) It breaks ❌. 100% of the time. So its not about the library (In this case TankStank) because I used the same logic, same component and same everything. The issue happened as soon as I encapsulated the logic inside the route in a compontent. And it works fine when you enter the module for the first time, so the code works; if you navigate between routes it works well also. But as soon as you hard reload, it breaks (sometimes just with normal refresh as well).

So I append the step by step on how to reproduce the issue. I tested it myself with a brand new clone and it reproduced 100% of the times

1. clone the example repository using git clone https://github.com/danicruz0415/solidStartErrorExample.git
2. enter the folder using cd .\solidStartErrorExample\, run npm install then run npm run dev
3. navigate to http://localhost:3000/app/teachers/
4. It will load fine.
5. Then refresh using F5 or the browser icon until it breaks. It usually break at the first or at most second refresh. Note: this step is important, the error only happens after you refresh.

In the menu on the left you will see two options: “Teachers with bug” and “Teachers without bug”. If you navigate between them using the menu, you will see that the error does not happen. If you go to “Teachers without bug”, you will see that no matter how many times you refresh, the error does not occur. But if you go to “Teachers with bug” and refresh, it immediately breaks. Both pages are identical in content and logic, the only difference is that one returns the table directly (this one works) and the other one encapsulates the table inside a component (this one breaks)

I tried to eliminate as much code without losing the error, to have a shorter version. I hope this helps findind the cause and I hope with this example you can finally replicate the issue, as all previews examples sometimes failed and sometimes worked fine.

PS: I dont upload it to stackblitz, because all the examples posted by other people, when I run them it only shows “Upgrade Required”. I don’t know why. I read online that I only had to wait a bit, but It stays the same way for as much time I’ve left it that way.

Thank you so much for taking the time to look into this. I am tuned for any extra information that I may be able to recover. For now this is the information of my runtime:

Solid start version: 0.4.9
NPM version: 9.3.1
Vinxi version: 0.1.4
OS: Windows 11 (Version 10.0.22621 Build 22621)
Chrome version: Version 120.0.6099.217
Dependencies: 
    "@tanstack/solid-table": "^8.11.7" // for the table
    "flowbite": "^2.2.1" // component library for styles (I don't think it affects)
    "tailwindcss": "^3.3.3" // for styles

A lot of Solid libraries I realized recently aren’t built properly for SSR

I’m having the same issue, can someone expand on what does it means practically to properly build a component for SSR? And why things like the following do not work?

return <>
  <Show when={isServer} fallback="client">
    server
  </Show>
</>

(It writes “server” on the client page)

Think what this does. On the server it shows server and when the client gets there it now doesn’t. Which means that there is a hydration mismatch. It being undefined happens to be the way we handle defering the diff for stuff like lazy components, so it is getting past detection.

But before we get into how it fails we have to look at why. For things to hydrate the client needs to be in the same initial state as the server. So isServer could never be used as a conditional in JSX. It could be used to say swap a data source or run code that only happens on server or client but it could never make a structure change to the DOM. If you want to show something extra in the client then you need to apply that change afterwards in an onMount. Wanting something to only render on the server isn’t as easy but also doesn’t make a ton of sense (since it’d be immediately hidden).

Also @danicruz0415 thanks for the updated reproduction. I will take a look. It’s quite possible these are different issues but any hydration issue is good to find.

@danicruz0415 , excellent, I can confirm this reproduces the error as described, and my environment is quite different:

macos 4.2.1 arm64 / pnpm / firefox 119

Hi I hit the same issue in a brand new project using v0.4.9. I reduced the code as much as possible trying to keep a reproducible version of the error and got to reproduce it with a simple div and a h1: https://github.com/danicruz0415/solidStartErrorExample

Its really strange, because I created two routes: /about/ and /auth/, both look almost identical to me (the component is just a div and a title) but for some reason the first one works and the second one throws an error.

I restarted many times and ran npm run dev again but the same thing happens. I read about the issue and it says that it may be caused by components that have non-deterministic behavior, but I dont think that’s the case because here its just a div

I attach screenshots of both, almost identical components, one of which fails, and the other one that works fine

Failing component

Component that works properly

As you can see, on the element that fails, on the browser inspector can be seen that the element has a data-hk="0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-0-0-0-0" but the error says that the hidration system is looking for the key 0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-0-0-1 (last digit is different)

On the other hand on the element that works, the data-hk is the same, but it works fine. Both elements are under the same path so they don’t have different layouts or anything. This is all the information I could gather on the issue. I hope it helps to find what the issue is.

Hello,

I’m having issues with Hydration Mismatch in my test project. Navigating to home page works OK, but if I reload page I get Hydration Mismatch error:

This is StackBlitz demo. Basically I use SuspenseList with 3 internal Suspense.

Hi,

I’m having similar issues with Hydration Mismatch too in a very basic project. Here’s the repo: https://github.com/alveshelio/solidstart-authjs-bun I’m using bun v1.0.22 and all my dependencies in the project are up to date. I’ve created a new page “Contact” and whenever I try to visit it, the first time I get a Not Found and if I do a refresh on the page I get the Hydration Mismatch error

This only happens when using bun, if I use pnpm then I don’t get the Not Found nor the Hydration Mismatch error.

Well… I’m still stripping stuff away. Trying to use just ArkDatePicker.Root directly and still hitting issues. Which means now I want to look at how that’s implemented. A lot of Solid libraries I realized recently aren’t built properly for SSR. There could be Solid bugs in there as well. But I’m pretty sure it Ark-UI here. I see hydration IDs in the DOM around 6 and 10 where we are looking for 2. This suggests a bunch of siblings created prematurely.

@ryansolid Is the repro here sufficient to demonstrate the bug? https://stackblitz.com/edit/github-ivec47-zycscw

(thanks @birkskyum!)

Yeah I think so. Issue is in the DatePickerDemo specifically. Probably related to prematurely rendering props that aren’t inserted into the DOM. It’s a lot to debug… so starting by deleting until it works. But I think the issue is probably fairly high up.

EDIT: Yeah DatePicker.Root with nothing else has a problem which makes me think the problem is in the HoC wrappers.