Svelte 5 bindable not working local

[shinokada]

Describe the bug

The $bindable on my localhost shows the following error on console:

ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: Cannot use bind:value on this component because the property was not declared as bindable. To mark a property as bindable, use the $bindable() rune like this: let { value = $bindable() } = $props()

I use $bindable as the following:

let { myLang = $bindable('en'), targetLang = $bindable('nb') }: { myLang: string; targetLang: string } = $props();

I can build, preview and deploy without a problem. Demo

Reproduction

git clone git@github.com:shinokada/multilanguage-flashcard.git
cd multilanguage-flashcard
pnpm i
pnpm dev

Check the Developer Tools > Console. (Warning: since I'm using event.key, the shortcut won't work. You need to go through View > Developer to find out Developer Tool)

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 52.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 8.15.7 - /opt/homebrew/bin/pnpm
    bun: 1.0.13 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.62
    Edge: 124.0.2478.51
    Safari: 17.5
  npmPackages:
    svelte: 5.0.0-next.108 => 5.0.0-next.108

Severity

blocking an upgrade

[Conduitry]

Please provide a minimal reproduction without any unrelated code, not a your actual application.

[dummdidumm]

The error stems from your own UI library. You need to use $bindable() in the correct locations as the error message suggests, for example here