State referenced in `onblur` handler is undefined after navigation with async load

[MathiasWP]

Describe the bug

Relevant issues:

• Common auto-save pattern does not work for inputs svelte#14911
• In onblur handler: state_unsafe_mutation Updating state inside a derived or logic block expression is forbidden [svelte 5 issue] svelte#13684

Relevant fixes:

• fix: ensure event context is reset before invoking callback svelte#13737
• fix: avoid chromium issue with dispatching blur on element removal svelte#13694

It seems like this bug occurs when:

1. Some state is returned in a load method
2. This load method has an await (e.g. fetching data remotely)
3. The blur method is triggered from an input when navigating with the back/forward keys in the browser

I'm not really sure what the correct "mental model" is of this behaviour - but my two cents is that it feels wrong. It's really difficult to spot, as there's no typing that tells me that this can happen. The generated type-definition of let { data } = $props() is:

let data: {
    state: {
        message: string;
    };
}

It's really difficult to spot that this can happen since the type-definition says that state should always be defined in this context.

Reproduction

Github repro: https://github.com/MathiasWP/sveltekit-input-onblur-async-state-bug

Video:

Screen.Recording.2025-10-01.at.17.48.06.mov

Logs

+page.svelte?t=1759308998689:23 Uncaught TypeError: Cannot set properties of undefined (setting 'message')
    at HTMLInputElement.<anonymous> (+page.svelte?t=1759308998689:23:93)
    at events.js:61:21
    at without_reactive_context (shared.js:44:10)
    at HTMLInputElement.target_handler (events.js:60:11)
    at remove_effect_dom (effects.js:524:8)
    at destroy_effect (effects.js:471:3)
    at destroy_effect_children (effects.js:435:4)
    at destroy_effect (effects.js:475:2)
    at destroy_effect_children (effects.js:435:4)
    at destroy_effect (effects.js:475:2)

System Info

System:
    OS: macOS 15.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 274.14 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.6.5 - /opt/homebrew/bin/pnpm
    bun: 1.0.0 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 139.1.81.137
    Chrome: 140.0.7339.208
    Edge: 140.0.3485.94
    Safari: 18.6
  npmPackages:
    svelte: ^5.0.0 => 5.39.7

Severity

annoyance

Additional Information

No response

[Yashsingh045]

Hi @MathiasWP , I'd like to work on this. Could you please assign it to me?

[MathiasWP]

Hi @MathiasWP , I'd like to work on this. Could you please assign it to me?

I don't have the authorisation to do that

[MathiasWP]

Have you looked at it @Yashsingh045? This bug happens every now and then, and it's quite cumbersome to work around

[MathiasWP]

Does anyone have a workaround for solving this error? We get a lot of Sentry errors from this behaviour, but i'm not quite sure how to avoid it

[AndersRobstad]

This is an extremely frustrating issue that we encounter a lot using Svelte after the migration to Svelte-5. Makes it quite annoying to work with state returned from load functions when its not possible to confidently assume that it will exist in the lower level components that consumes the state...

[MathiasWP]

I want to ping this issue. I've found another case where this happens in attachments where the data referenced in the cleanup uses data from an async load method triggers Cannot read properties of undefined (reading 'current'):