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

[GustavBW]

Duplicates

• I have searched the existing issues

Latest version

• 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

[GustavBW]

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