append_styles(...) --> Cannot read properties of null (reading 'querySelector')

[inzanez]

Describe the bug

I get some random Cannot read properties of null (reading 'querySelector') pointing to the function apend_styles(anchor, css) in css.js.

css.js:20 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
    at Array.<anonymous> (css.js:20:15)
    at run_all (utils.js:44:8)
    at process_micro_tasks (task.js:21:2)

Reproduction

I am afraid I did not manage to reproduce this outside my app, and the part it occurs in is something rather special (recursive and dynamic components). But it seems to occur if the svelte:component changes to another component.

Logs

css.js:20 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
    at Array.<anonymous> (css.js:20:15)
    at run_all (utils.js:44:8)
    at process_micro_tasks (task.js:21:2)
(anonymous)	@	css.js:20
run_all	@	utils.js:44
process_micro_tasks	@	task.js:21

System Info

System:
    OS: Linux 6.12 Void
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Memory: 47.80 GB / 62.73 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.8.1 - /usr/bin/npm
    pnpm: 9.14.2 - /usr/bin/pnpm
  Browsers:
    Brave Browser: 121.1.62.153
    Chromium: 131.0.6778.85
  npmPackages:
    svelte: ^5.10.1 => 5.17.1

Severity

Prevents upgrade to Svelte 5

[paoloricciuti]

Are you using or rendering in a webcomponent?

[inzanez]

No, it's a pretty default SvelteKit project. No webcomponents involved.

[paoloricciuti]

Then we really need a reproduction for this.

[inzanez]

Ok, it seems that this was the result of some direct DOM manipulation ('appendChild' without a 'removeChild' on component destruction),...

[frederikhors]

I'm getting this error too. i'm trying to understand to be able to reproduce but I cannot understand why it happens! If I comment some part of the code it disappears but in that part of the code there is simple html only.

I'm on "svelte": "5.17.3" and I tried to downgrade until 5.15.0: it's the same!

If I find out how to reproduce I'll write here.

THIS IS HUGE I THINK! Can you please update the priority on this, please?

[whalderman]

I'm also not sure what combination of code causes this yet, but in my case Svelte is attempting to appendChild a style element to a comment, which is unexpected.