Rendering errors when Svelte Async is enabled

[johnathanludwig]

I was looking at testing out svelte async and remote functions, but unfortunately it seems just enabling it causes Layerchart to have errors during rendering. This is using the latest Layerchart (next.35), Svelte (^5.37.0) and Kit (^2.27.0)

It's very possible this is a bug in svelte, but I wanted to check here first.

Reproduction:

https://stackblitz.com/edit/sveltejs-kit-template-default-ztd4mk3s?file=svelte.config.js

There will be an error in the console. You can set async: false and the chart will render after the server restarts.

In the console you will see:

Uncaught TypeError: can't access property "before", dest is null
    move chunk-V55QN55P.js:1171
    reconcile chunk-V55QN55P.js:962
    commit chunk-V55QN55P.js:790
    #commit chunk-WYIA4HQE.js:2053
    process chunk-WYIA4HQE.js:1912
    flush_effects chunk-WYIA4HQE.js:2166
    flush chunk-WYIA4HQE.js:2035
    ensure chunk-WYIA4HQE.js:2095
    dequeue chunk-WYIA4HQE.js:1797
    enqueue chunk-WYIA4HQE.js:2104
    ensure chunk-WYIA4HQE.js:2091
    internal_set chunk-WYIA4HQE.js:1348
    set chunk-WYIA4HQE.js:1337
    consequent_1 layerchart.js:6415
    bind_this chunk-V55QN55P.js:3014
    untrack chunk-WYIA4HQE.js:3075
    bind_this chunk-V55QN55P.js:3012
    update_reaction chunk-WYIA4HQE.js:2788
    update_effect chunk-WYIA4HQE.js:2919
    create_effect chunk-WYIA4HQE.js:2299
    render_effect chunk-WYIA4HQE.js:2433
    bind_this chunk-V55QN55P.js:3009
    update_reaction chunk-WYIA4HQE.js:2788
    update_effect chunk-WYIA4HQE.js:2919
    flush_queued_effects chunk-WYIA4HQE.js:2193
    process chunk-WYIA4HQE.js:1921
    flush_effects chunk-WYIA4HQE.js:2166
    flush chunk-WYIA4HQE.js:2035
    ensure chunk-WYIA4HQE.js:2095
    dequeue chunk-WYIA4HQE.js:1797
    dequeue chunk-WYIA4HQE.js:1795
    enqueue chunk-WYIA4HQE.js:2104
    ensure chunk-WYIA4HQE.js:2091
    internal_set chunk-WYIA4HQE.js:1348
    set chunk-WYIA4HQE.js:1337
    set params state.svelte.js:65
    initialize client.js:526
    _hydrate client.js:2736
    start client.js:338
    async* (index):200
    promise callback*

[techniq]

Hey @johnathanludwig 👋

I'm very exited to checkout svelte async and remote functions too! I plan to update Github Analysis and Strava Analysis soon to use these (which use LayerChart and Svelte UX).

Both libraries were pretty good to tease out some Svelte 5 compatibility issues, and wouldn't be surprised if the same is true for Svelte async

• Svelte 5 compatibility svelte-ux#144
• Svelte 5 support / migration #159
• Svelte 5.19.5+ reactivity regressions #384
• [ForceSimulation] Svelte 5 performance regressions #451

Always best to provide a minimal repo (without a direct dep on a package like LayerChart), but starting a discussion with the Svelte maintainers early wouldn't hurt (might be a known issue).

[techniq]

@johnathanludwig likely related, but noticed some issues when upgrading Svelte from 5.34.4+. Tracking via #630

[l0uisgrange]

Hi @techniq 👋, I get the exact same error, Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'dest.before'), and it disappears if I set async: false as well.

[techniq]

Thanks for the feedback @l0uisgrange. I've been working with the Svelte maintainers to investigate some regressions starting in 3.36.0 (async edition).

Rich has a PR that looks to resolve most of the issues (with still some local performance degradation, but does not present in production).

Can you test using pnpm add https://pkg.pr.new/svelte@16631 to see if this error still exists?

[l0uisgrange]

Good news, I can confirm the error disappears with this version of svelte 😁.

[techniq]

Thanks @johnathanludwig for the report and @l0uisgrange for the feedback. Fixed with svelte@5.38.2