SolidJSS
SolidJS•2y ago•
5 replies
Ghirigoro

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

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>;
};

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.
Was this page helpful?