solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
31.64k stars 887 forks source link

[Bug?]: SuspenseList hydration error #2124

Open ryoid opened 2 months ago

ryoid commented 2 months ago

Duplicates

Latest version

Current behavior 😯

Using <SuspenseList> causes hydration error. Not sure if this is a SolidStart issue.

Expected behavior 🤔

It should control order suspense are revealed.

Steps to reproduce 🕹

https://stackblitz.com/edit/github-fffd7t?file=src%2Froutes%2Findex.tsx

import { Suspense, SuspenseList, createResource } from 'solid-js';

export default function Home() {
  const [data] = createResource(() => ['red', 'blue', 'green']);
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense>
        {/* Text node works */}
        {/* {data()} */}
        <div>{data()}</div>
      </Suspense>
    </SuspenseList>
  );
}

Context 🔦

Trying to control how Suspense are revealed.

Your environment 🌎

No response

lxsmnsyc commented 2 months ago

This is a SuspenseList issue, at least since that component is experimental.

ryansolid commented 2 months ago

Yeah I suspected there are issues here. I will move this to Solid core.