SolidJS•10mo ago

Hydration Mismatch. Unable to find DOM nodes for hydration key

I'm trying to setup a SolidJS SSR project with Vite, Fastify, and the @fastify/vite plugin. I've finally got something rendering, but am getting this error:

Uncaught Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0
    at getNextElement (chunk-TJVPM3FD.js?v=ff79f117:398:13)
    at _$$component.location (App.tsx:8:2)
    at @solid-refresh:25:42
    at untrack (chunk-2MQNFOLP.js?v=ff79f117:574:12)
    at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
    at runComputation (chunk-2MQNFOLP.js?v=ff79f117:889:22)
    at updateComputation (chunk-2MQNFOLP.js?v=ff79f117:872:3)
    at createMemo (chunk-2MQNFOLP.js?v=ff79f117:330:5)
    at [solid-refresh]App (@solid-refresh:22:20)
    at chunk-2MQNFOLP.js?v=ff79f117:702:14

Uncaught Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0
    at getNextElement (chunk-TJVPM3FD.js?v=ff79f117:398:13)
    at _$$component.location (App.tsx:8:2)
    at @solid-refresh:25:42
    at untrack (chunk-2MQNFOLP.js?v=ff79f117:574:12)
    at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
    at runComputation (chunk-2MQNFOLP.js?v=ff79f117:889:22)
    at updateComputation (chunk-2MQNFOLP.js?v=ff79f117:872:3)
    at createMemo (chunk-2MQNFOLP.js?v=ff79f117:330:5)
    at [solid-refresh]App (@solid-refresh:22:20)
    at chunk-2MQNFOLP.js?v=ff79f117:702:14

The App component this is happening in is as basic as you can get:

import type { Component } from "solid-js";

export function createApp() {
    return <App />;
}

export const App: Component = () => {
    return <div>Hello World!! </div>;
};

import type { Component } from "solid-js";

export function createApp() {
    return <App />;
}

export const App: Component = () => {
    return <div>Hello World!! </div>;
};

So basic in fact I'm not sure what there is to mismatch. I know it's not much info to go on but any leads on how to debug this would be appreciated. P.S. - Even with the error the app renders properly on first render. Subsequent hot updates though are received by the browser but don't change what's rendered.

3 Replies

Birk Skyum•10mo ago

Do you have a repro i can run/debug?

lxsmnsyc•10mo ago

seems like an integration issue with fastify-vite if the error occurs during HMR update

GhirigoroOP•10mo ago

Thanks for the kind offer but it's part of a monorepo and includes references to a lot of internal libraries. It would take too dig out of that monorepo and make the thing a standalone project. I used that plugin because it was in theory going to be easier to integrate, but it's been a grind for 2 days just to get that thing running, so I may be barking up the wrong tree. If you have any suggestions or know of any resources for integrating SolidJS into a TS/Fastify project I'm all ears. Thanks I figured it out. The plugin's weak TS support, outdated examples, and lack of error handling made it a bit hard to figure out exactly what it wanted but I got there. Thanks all!

Gaming

Programming

Hydration Mismatch. Unable to find DOM nodes for hydration key