Cannot read properties of null (reading 'length') after updating svelte from 5.38.1 to 5.38.2

[ocavue]

Describe the bug

After updating svelte from 5.38.1 to 5.38.2, I get the following error

Uncaught TypeError: Cannot read properties of null (reading 'length')
    at flush_queued_effects (chunk-4EMMLRQK.js?v=ca8f2691:2242:31)
    at _Batch.process (chunk-4EMMLRQK.js?v=ca8f2691:1961:7)
    at flush_effects (chunk-4EMMLRQK.js?v=ca8f2691:2206:13)
    at _Batch.flush (chunk-4EMMLRQK.js?v=ca8f2691:2075:7)
    at chunk-4EMMLRQK.js?v=ca8f2691:2135:17
    at dequeue (chunk-4EMMLRQK.js?v=ca8f2691:1837:3)

Reproduction

Open the following two links in the browser

• Working example with svelte 5.38.1 https://stackblitz.com/edit/github-4kfsrzr5?file=package.json%3AL21
• Not working example with svelte 5.38.2 https://stackblitz.com/edit/github-4kfsrzr5-cyspqsmh?file=package.json%3AL21

In the second example, the following error will show in the console:

Uncaught TypeError: Cannot read properties of null (reading 'length')
    at flush_queued_effects (chunk-4EMMLRQK.js?v=ee419023:2242:31)
    at _Batch.process (chunk-4EMMLRQK.js?v=ee419023:1961:7)
    at flush_effects (chunk-4EMMLRQK.js?v=ee419023:2206:13)
    at _Batch.flush (chunk-4EMMLRQK.js?v=ee419023:2075:7)
    at chunk-4EMMLRQK.js?v=ee419023:2135:17
    at dequeue (chunk-4EMMLRQK.js?v=ee419023:1837:3)

Logs

N/A

System Info

N/A

Severity

annoyance

[ocavue]

Seems related to #16631

[Rich-Harris]

started whittling this down to a more manageable repro: https://stackblitz.com/edit/github-4kfsrzr5-zpxv5k4q

it doesn't reproduce in the playground because the playground is in async mode, and there's a flush_sync_in_effect error. This likely indicates that Prosekit is incompatible with async mode at present

[ocavue]

Thanks for the simplified repro. I did some further investigation and found that the issue is with calling flushSync() in Svelte actions.

Background

ProseKit combines Svelte with ProseMirror to create rich text editors. ProseMirror is a vanilla JS library where operations are synchronous by design (inherent to how text editors maintain consistency).

The typical editor architecture:

1. Svelte app containing a <div class="editor"> managed by ProseMirror
2. Svelte components like CodeBlock.svelte mounted within that div
3. A <pre> element inside CodeBlock, also managed by ProseMirror

When mounting the editor div, ProseMirror must set both content and selection simultaneously. This requires flushSync() to ensure the <pre> element is properly mounted before ProseMirror handles selection.

Reproduction

I've created a minimal reproduction (pure Svelte + vanilla JS, no ProseMirror/ProseKit): https://github.com/issueset/svelte-async-issue

Test Results:

• pnpm run dev:1:sync:flush - ✅ Works correctly (5.38.1)
  Screenshot

  
• pnpm run dev:1:sync:none - ❌ Without flushSync(): selection fails
  Screenshot

  
• pnpm run dev:1:async:flush - ❌ Async mode: flush_sync_in_effect error
  Screenshot

  
• pnpm run dev:2:sync:flush - ❌ 5.38.2: Cannot read properties of null error
  Screenshot

  

Issues

Immediate: 5.38.2 broke flushSync() in actions, causing regressions in existing sync applications.

Long-term: When async components become the default, how should editors handle cases requiring synchronous DOM coordination? The current flush_sync_in_effect error suggests this pattern won't be supported.

Would appreciate guidance on the intended approach for editor use cases in async mode.

[oversanne]

Hello,
Also impacted by that, and blocking for an upgrade to 5.38.1.
In many scenarios I have children updating before the parent, implying not found objects in the children while they should exists (and so the same kind of issue listed here).
I'm watching this issue, and wishing good luck for solving that.
Thank you for taking care of svelte ❤️

[kyoshino]

This is also preventing us from upgrading. In our case, syncing from a $state to the DOM fails randomly, resulting in a blank page. This is because the state controls the HTML hidden attribute. Adding flushSync() results in the length error reported in this issue when a sync does not occur.

[BenjaminCourtin]

Hello, same situation here. I am using Tiptap which relies on ProseMirror.

[dummdidumm]

I've created a minimal reproduction (pure Svelte + vanilla JS, no ProseMirror/ProseKit): https://github.com/issueset/svelte-async-issue

Turned this into a playground

[dummdidumm]

For reference, this is where the prosemirror adapter uses flushSync. @ocavue could you elaborate a bit more on the need of having to flush sync? Alternatively, what if you used await tick() instead of flushSync()? Would that conflict with the rest of the code base since it will force you to make everything async which doesn't work/scale?

[ocavue]

@dummdidumm Thanks for looking into the code of prosemirror-adapter.

Here's the difference between using tick() and flushSync() in prosemirror-adapter. As you can see in the videos, when using tick(), the text selection (or text cursor, text caret) gets disrupted within the heading. I’ll explain more about this later.

• Using flushSync() ✅:

  • Online playground: https://prosemirror-adapter-e2e-i6y1fwtz7-ocavues-projects.vercel.app/svelte/

  • Video:

    CleanShot.2025-08-27.at.01.26.43.mp4

• Using tick() ❌:

  • Code change: prosekit/prosemirror-adapter@20a0be3

  • Online playground: https://prosemirror-adapter-e2e-4rzrmwfd2-ocavues-projects.vercel.app/svelte/

  • Video

    CleanShot.2025-08-27.at.01.27.38.mp4

---

To explain this at a high level, ProseMirror is a library with mostly synchronous APIs. Specifically, here's what I expect when combining ProseMirror with Svelte.

1. ProseMirror creates a <div data-node-view-content>
2. Svelte mounts a Svelte component <h1> inside this <div>
3. ProseMirror sets the text selection inside the <h1>

If I use tick(), which essentially delays the flushSync() to the next loop, I will get the following result:

1. ProseMirror creates a <div data-node-view-content>
2. ProseMirror sets the text selection inside the <h1>, but this step fails because the <h1> doesn't exist yet.
3. After a tick, Svelte mounts a Svelte component <h1> inside the <div>, without correct text selection set.

That's why the text selection is disrupted in the video above when using tick().

(This is just my understanding; I could make some incorrect conclusions about how Svelte works.)

---

ProseMirror, ProseMirror-adapter, and ProseKit are all quite complex libraries. That’s why I created a simpler example using just Svelte and Vanilla JS in my previous comments. You can observe the same issue (i.e., text selection is not created correctly) in that example. I hope that example helps clarify why mounting a Svelte component synchronously is important for text editors.