testing-library/svelte-testing-library

happy-dom can't render Svelte 5 component if it starts with an `if` block followed by a table with dynamic content

Closed this issue · 2 comments

danieldiekmeier commented

It seems like I ran into a very specific edge case. I can't render a component that

  • starts with an if block
  • followed by a table that contains any kind of "dynamic" content

For example, this does not render. (Yes, it even happens with these "static dynamic" values.)

{#if true}
  <div>Hello</div>
{/if}

<table>
  <tbody>
    <tr>
      <td>{"Dynamic Fails"}</td>
    </tr>
  </tbody>
</table>

I'm getting this error:

TypeError: Cannot read properties of null (reading 'Symbol(nodeArray)')
 ❯ get firstChild node_modules/.pnpm/happy-dom@15.8.3/node_modules/happy-dom/src/nodes/node/Node.ts:272:25
 ❯ get_first_child node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/dom/operations.js:85:28
     83|  * @returns {Node | null}
     84|  */
     85| /*@__NO_SIDE_EFFECTS__*/
       |                            ^
     86| export function get_next_sibling(node) {
     87|  return next_sibling_getter.call(node);
 ❯ Module.child node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/dom/operations.js:109:10
 ❯ Repro src/Repro.svelte:37:33
 ❯ node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/render.js:230:16
 ❯ update_reaction node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/runtime.js:327:56
 ❯ Module.update_effect node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/runtime.js:455:18
 ❯ create_effect node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/reactivity/effects.js:98:26
 ❯ Module.branch node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/reactivity/effects.js:331:9
 ❯ node_modules/.pnpm/svelte@5.1.9/node_modules/svelte/src/internal/client/render.js:212:25

I have created a full reproduction here: https://github.com/danieldiekmeier/happy-dom-svelte5-repro

It even contains additional cases where you can see that if

  1. The table is completely static, it works
  2. Without the leading if block, it works
  3. With a div instead of a table, it works
System:
  OS: macOS 15.0.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 10.10 GB / 64.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.11.0 - ~/.local/share/mise/installs/node/22/bin/node
  npm: 10.9.0 - ~/.local/share/mise/installs/node/22/bin/npm
  pnpm: 9.12.3 - ~/.local/share/mise/installs/node/22/bin/pnpm
npmPackages:
  @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0
  @testing-library/jest-dom: ^6.6.3 => 6.6.3
  happy-dom: ^15.8.3 => 15.8.3
  svelte: 5 => 5.1.9
  vitest: ^2.1.4 => 2.1.4
mcous commented

Thanks for this report! It looks very similar to #319 - the cause of which was capricorn86/happy-dom#1392. If you have the time and ability, it would be super helpful if you could use the Svelte source code as a guide to narrow this reproduction down to a specific vanilla JS interaction that causes this exception in happy-dom.

They're super responsive to bugs over at happy-dom, so if we can figure out the specific interaction - without Svelte itself actually involved - I'm sure we can get it fixed quickly.

danieldiekmeier commented

Thank you for the quick reply and the encouragement to dig deeper. I dug so far that I found out it that the bug is directly in happy-dom and not at all here, so I created a new issue over there. Thank you!

  • ❤️1