Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 000000001000003

[Misaka299]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The page cannot be loaded normally, the console reports an error, and the page is incorrectly on an old version page that does not exist.

Expected behavior 🤔

Refresh and load the page normally.

Steps to reproduce 🕹

myapp.zip

I can't guarantee you can reproduce the issue, but this is the original file as it stands now.

Context 🔦

I don't know why this happens. I can't reproduce this bug in the Edge browser. The page can't be refreshed normally in the Google browser, the console reports an error, and the page is wrongly kept in an old version that no longer exists. And I have disabled the cache in the network panel of the developer tools of the Google browser.
I tried to delete the .node_modules folder but it didn't work.
When I posted this issue, it was the next day and the computer was shut down. The situation is still the same.

Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 000000001000005
at getNextElement (chunk-URGBOLR2.js?v=efa64b10:276:37)
at Footer2 (Footer.jsx:4:5)
at @solid-refresh:25:42
at untrack (chunk-5EMI7L6U.js?v=efa64b10:454:12)
at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
at runComputation (chunk-5EMI7L6U.js?v=efa64b10:719:22)
at updateComputation (chunk-5EMI7L6U.js?v=efa64b10:701:3)
at Object.readSignal (chunk-5EMI7L6U.js?v=efa64b10:637:67)
at resolveChildren (chunk-5EMI7L6U.js?v=efa64b10:1014:84)
at resolveChildren (chunk-5EMI7L6U.js?v=efa64b10:1018:22)

Your environment 🌎

OS: Window10 x64
Chrome version: 127.0.6533.89

{
  "name": "example-basic",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
    "version": "vinxi version"
  },
  "dependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.14.1",
    "@solidjs/start": "^1.0.6",
    "postcss": "^8.4.40",
    "solid-js": "^1.8.18",
    "tailwindcss": "^3.4.7",
    "vinxi": "^0.4.1"
  },
  "engines": {
    "node": ">=18"
  }
}

[lsalim19]

Try to refresh the cache by:

1. Open the Network tab on the chrome's DevTools (F12)
2. Turn on the "Disable cache" checkbox
3. Reload the page

This might solve your problem

[tdt-dung]

I downloaded your zip file (myapp.zip), installed the packages, and ran fine. You should actually try another browser (Opera, Firefox,...).

These screenshots were taken in the Firefox browser.

I also created a new route and it ran fine.

[robertwach]

Same case here [Bug?]:Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0000000010000000001

If you remove or add a class item to an element the error just pops up and when you refresh the error goes away.

[trusktr]

I you happen to have the solid-start project inside a parent NPM project (f.e. a monorepo, etc), try moving the solid-start project outside of the parent NPM project. That's one thing that currently causes the error.

[Nauxscript]

same problem...
when i start my project i got this error, but the error gone after i refresh the page.
really strange...

[qimmer]

I have been struggling with the same issue. Refreshing the page and the error goes away. Next time I relaunch vinxi, the first page load causes this error again. Can confirm I have the same package versions as author.

[ryansolid]

Hydration issues can happen for a multitude of reasons so generally these issues are unrelated. There was a bug in 1.0.7 that impacted dev server startup. It was fixed in 1.0.8. @Nauxscript, @quimmer what you described sounds like that. Try force update to 1.0.8.

[tonyrewin]

Hydration issues can happen for a multitude of reasons ... Try force update to 1.0.8.

I'm facing this at 1.0.8 but only in dev mode. Maybe it is my fault, is there a good way to debug such errors?

UPD: 1.0.9 not reproducing anymore