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.

[vanstep01]

i encountered the same issue, but i discovered that after migrating to svelte 5, i was passing slot="name" in one of my components, once i removed this slot, everything started working correctly

[paoloricciuti]

i encountered the same issue, but i discovered that after migrating to svelte 5, i was passing slot="name" in one of my components, once i removed this slot, everything started working correctly

Can you provide a reproduction of this?

[LunaeSomnia]

I just stumbled into this as well and, just like others here, I cannot replicate it. I don't even understand the reason.

In my case, this error throws after navigating to one specific subpage out of hundreds of referenced in a table (apparently random).

"svelte": "^5.25.2"
"@sveltejs/kit": "^2.20.2"

[Nover98]

I came across the same problem.

And unfortunately I can't reproduce it separately from my working project either. I get this problem when I iterating an array and in the {#each} construction there is a key and I try to rendered duplicate items.
Like this:

<script>
	let arr = [{id: 1}, {id: 2}, {id: 3}, {id: 1}, {id: 1}];
</script>

{#each arr as item (item.id)}
	<p>{item.id}</p>
{/each}

When I try to reproduce it separately, I get an expected error

Svelte error: each_key_duplicate
Keyed each block has duplicate

my public dependencies:

"dependencies": {
"@sveltejs/adapter-static": "3.0.8",
"@sveltejs/kit": "2.20.4",
"@sveltejs/vite-plugin-svelte": "5.0.3",
"svelte": "5.25.8"
},
"devDependencies": {
"@eslint/js": "9.24.0",
"@stylistic/eslint-plugin": "4.2.0",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/svelte": "5.2.7",
"@vitest/coverage-istanbul": "3.1.1",
"@vitest/ui": "3.1.1",
"d3-scale": "4.0.2",
"eslint": "9.24.0",
"eslint-config-prettier": "10.1.1",
"eslint-formatter-checkstyle": "8.40.0",
"eslint-plugin-jsdoc": "50.6.9",
"eslint-plugin-svelte": "3.5.1",
"globals": "16.0.0",
"husky": "9.1.7",
"jsdom": "26.0.0",
"lint-staged": "15.5.0",
"prettier": "3.5.3",
"prettier-plugin-svelte": "3.3.3",
"sass": "1.86.3",
"svelte-check": "4.1.5",
"svelte-preprocess": "6.0.3",
"svelte-preprocess-import-assets": "1.1.0",
"vite": "6.2.5",
"vite-plugin-static-copy": "2.3.0",
"vitest": "3.1.1"
}

[oliie]

I also have the same in my project. Seems to be when I save a file - and it happens no matter on which page I am.

Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

The function it refers to is the following:

// node_modules/svelte/src/internal/client/dom/css.js
function append_styles(anchor, css) {
  effect(() => {
    var root = anchor.getRootNode();
    var target = (
      /** @type {ShadowRoot} */
      root.host ? (
        /** @type {ShadowRoot} */
        root
      ) : (
        /** @type {Document} */
        root.head ?? /** @type {Document} */
        root.ownerDocument.head
      )
    );
    if (!target.querySelector("#" + css.hash)) { // Here's the fail
      const style = document.createElement("style");
      style.id = css.hash;
      style.textContent = css.code;
      target.appendChild(style);
      if (true_default) {
        register_style(css.hash, style);
      }
    }
  });

Not sure what's causing it though...

"svelte": "^5.41.4",
"@sveltejs/kit": "^2.47.3",