[Bug?]: Flakey Hydration Error Key 0-0-0-0-0-0-0-5

[lilybw]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I got a very simple setup, just ran "bun create solid" to try out solid, and then added a fetch call outside, the entire setup can be found here: https://github.com/GustavBW/helldiving

99% of the code:

import { createSignal, createResource, Switch, Match, Show } from "solid-js";
import "./app.css";
import { WarStatusDTO } from "./ts/types";
import { prettyPrintJson } from 'pretty-print-json';
import { getWarStatus } from "./ts/helldiversApi";

export default function App() {
  const [count, setCount] = createSignal(0);
  const [resource, { refetch }] = createResource(getWarStatus);
  
  return (
    <main>
      <h1>Helldiving</h1>
      <h2>For Democracy!</h2>
      <button class="increment" onClick={() => setCount(count() + 1)}>
        Clicks: {count()}
      </button>
      <p>
        <button onClick={refetch}>Refetch</button>
        <Show when={resource.loading}>Loading...</Show>
        <Show when={resource.error}>Error: {resource.error.message}</Show>
        <Show when={resource()}>
          <div innerHTML={prettyPrintJson.toHtml(resource(), {})} />
        </Show>
      </p>
    </main>
  );
}

The culprit is something to do with the createResource signal, as when I remove it, everything works just fine. However, if it remains then sometimes, like 8/10 times, I get the aforementioned hydration error.

Stack trace:

Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-5
    at getNextElement (chunk-JSAOQG5U.js?v=0b822351:276:37)
    at get children (app.tsx:22:31)
    at Show.createMemo.name [as fn] (chunk-SR3X3KTH.js?v=0b822351:1495:27)
    at runComputation (chunk-SR3X3KTH.js?v=0b822351:707:22)
    at updateComputation (chunk-SR3X3KTH.js?v=0b822351:689:3)
    at Object.readSignal (chunk-SR3X3KTH.js?v=0b822351:625:67)
    at Object.fn (chunk-JSAOQG5U.js?v=0b822351:238:58)
    at runComputation (chunk-SR3X3KTH.js?v=0b822351:707:22)
    at updateComputation (chunk-SR3X3KTH.js?v=0b822351:689:3)
    at createRenderEffect (chunk-SR3X3KTH.js?v=0b822351:218:75)

(Also amazing error feedback btw)

I've also tested and confirmed that the pretty-print-json shenanigans I'm doing are not the culprit.

Interestingly, if I press the "reset error" button on the error prompt, everything works and the page loads in correctly. However, if I just reload the page, we're back to chance.

Expected behavior 🤔

Not much really. Just a massive, failed html-ified json dump.

Steps to reproduce 🕹

Steps:

1. Pull the repo
2. cd /helldiving
3. bun install
4. bun run dev
5. open in chrome
6. reload the page until error. (Should happen pretty fast, I have an 80% error rate)

Context 🔦

I'm just trying to get started with Solid (coming from React)

Your environment 🌎

System:
   OS: Windows 11 x64 v 22H2 build 22621.3447
   CPU: Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz   3.60 GHz
Binaries:
   Node: v18.17.0
   Bun: 1.1.4
   Chrome: 124.0.6367.63 64-bit
NpmPackages:
   (from helldiving/package.json in repo)

"dependencies": {
    "@solidjs/start": "^1.0.0-rc.0",
    "pretty-print-json": "^3.0.0",
    "solid-js": "^1.8.16",
    "vinxi": "^0.3.11"
 }

[Lzadhito]

This is the issue that holding my development! any simple guide for me to contribute?

[lxsmnsyc]

<Show when={resource.loading}>Loading...</Show>
<Show when={resource.error}>Error: {resource.error.message}</Show>
<Show when={resource()}>
    <div innerHTML={prettyPrintJson.toHtml(resource(), {})} />
</Show>

This whole section might just be the cause of it. In general, I just can't recommend the use of loading and error properties over Suspense and ErrorBoundary, due to the former's quirky behavior

[lilybw]

This whole section might just be the cause of it. In general, I just can't recommend the use of loading and error properties over Suspense and ErrorBoundary, due to the former's quirky behavior

Suspense doesn't seem to work either it just fallbacks regardless. I rewrote the main statement to:

        <button onClick={refetch}>Refetch</button>
        <Suspense fallback={<div>Error!</div>}>
          <WarStatus warStatus={resource()!} />
        </Suspense>

With an extra component WarStatus doing absolutely nothing:

export default function WarStatus({warStatus}: WarStatusProps) {
    return (
        <div innerHTML={JSON.stringify(warStatus)} />
    )
}

The data is present btw. I tried console.logging it and it does fetch successfully. I could go completely React on this and manually taking over control flow, and it'd probably work, but I don't think that's how its supposed to be done in Solid.

[Lzadhito]

I found that this bug happens when there is a syntax/functional error, after fixing the error this bug will go away.

Even if it not, I may hard refresh the page and its done

[dermoumi]

I had this issue in development, and turns out it's just a cache issue for me.

Just check the option to disable cache while the devtools are open in your devtools settings and it should solve the issue.

[mdynnl]

I referenced this issue by mistake judging by the last comment. But the original posted issue doesn't seem to be related. The original repro isn't available anymore but neither can reproduce it.