[Bug?]: createResource() throws "Hydration Mismatch" errors on page load

[FrenchDilettante]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

createResource fails at the hydration phase. If you look at the example given below, the search count is empty and the <For> list throws an error:

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

If you open the page source, you will notice that the data is present at the bottom of the page:

<p>Found <!--$--><!--/--> results</p><ul></ul></div>
[...]
<script>$R[3]($R[0],$R[4]=["all","results"]);</script>

Expected behavior 🤔

Solid has the API response but is not able to hydrate the component. Using the input field triggers API calls and works fine afterwards.

Steps to reproduce 🕹

// src/components/Search.tsx
export default function Search() {
  const [searchParams, setSearchParams] = useSearchParams();

  const [results] = createResource<string[], string>(
    () => searchParams.q?.trim() || "",
    async (q) => {
      const response = await fetch("http://localhost:3000/api/search?q=" + encodeURIComponent(q));
      return response.json();
    },
  );
  
  return (
    <>
      <p>Found {results.latest?.length} results</p>
      <ul>
        <For each={results.latest}>{(result) => <li>{result}</li>}</For>
      </ul>
    </>
  );
}

// src/app.tsx
<MetaProvider>
  <Title>SolidStart - Basic</Title>
  <SearchPanel />
  <Suspense>{props.children}</Suspense>
</MetaProvider>

// src/api/search.ts
export async function GET() {
  // purposefully simplified for this bug report
  return ["some", "results"];
}

Context 🔦

I am writing a search component sitting at the top of the layout. On every page, the user should be able to type a search criteria and see matching results. I'm using useSearchParams so that the search results are still visible if the user opens a link that contains the search criteria.

Your environment 🌎

System:
  OS: Linux 6.7 Fedora 39
  CPU: 12 amd64
Binaries:
  Node: 21.7.1 (using NVM)
  npm: 10.5.0 (using NVM)
$ npm ls | grep solid
├── @solidjs/[email protected]
├── @solidjs/[email protected]
├── @solidjs/[email protected]
├── [email protected]

[FrenchDilettante]

Closing this issue.

As soon as I opened it, I realised that the component sits outside of the tag in the layout. Moving it inside fixed the issue.