Skip to content
40 changes: 40 additions & 0 deletions .changeset/fix-svelte-async-mode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
"@tanstack/svelte-db": patch
---

Fix flushSync error in Svelte 5 async compiler mode

Previously, `useLiveQuery` threw an error when Svelte 5's async compiler mode was enabled:

```
Uncaught Svelte error: flush_sync_in_effect
Cannot use flushSync inside an effect
```

This occurred because `flushSync()` was called inside the `onFirstReady` callback, which executes within a `$effect` block. Svelte 5's async compiler enforces a strict rule that `flushSync()` cannot be called inside effects, as documented at svelte.dev/e/flush_sync_in_effect.

**The Fix:**

Removed the unnecessary `flushSync()` call from the `onFirstReady` callback. Svelte 5's reactivity system automatically propagates state changes without needing synchronous flushing. This matches the pattern already used in Vue's implementation.

**Compatibility:**

- ✅ For users WITHOUT async mode (current default): Works as before
- ✅ For users WITH async mode: Now works instead of throwing error
- ✅ Future-proof: async mode will be default in Svelte 6
- ✅ All 23 existing tests pass, confirming no regression

**How to enable async mode:**

```javascript
// svelte.config.js
export default {
compilerOptions: {
experimental: {
async: true,
},
},
}
```

Fixes #744
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -151,3 +151,4 @@ tasks/
.output
.tanstack
.claude
package-lock.json
Loading
Loading