sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.21k stars 4.09k forks source link

Bind to textarea with a store doesn't work in Svelte 5 #10185

Closed ciscoheat closed 8 months ago

ciscoheat commented 8 months ago

Describe the bug

I noticed that binding to a textarea with a store gives an error (see logs):

<script lang="ts">
  import { writable } from 'svelte/store';
  const msg = writable('');
</script>

<textarea bind:value={$msg} />

Binding to an input field works fine.

Reproduction

https://github.com/ciscoheat/svelte5-textarea-error

Logs

ReferenceError: $msg is not defined
    at _page (E:\Projects\TEST\svelte5-textarea-error\src\routes\+page.svelte:5:23)
    at E:\Projects\TEST\svelte5-textarea-error\.svelte-kit\generated\root.svelte:45:41
    at Module.slot (E:\Projects\TEST\svelte5-textarea-error\node_modules\.pnpm\svelte@5.0.0-next.35\node_modules\svelte\src\internal\server\index.js:440:3)
    at Layout (E:/Projects/TEST/svelte5-textarea-error/node_modules/.pnpm/@sveltejs+kit@2.3.2_@sveltejs+vite-plugin-svelte@3.0.1_svelte@5.0.0-next.35_vite@5.0.11/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte:14:24)
    at $$render_inner (E:\Projects\TEST\svelte5-textarea-error\.svelte-kit\generated\root.svelte:44:40)
    at Root (E:/Projects/TEST/svelte5-textarea-error/.svelte-kit/generated/root.svelte:151:3)
    at Module.render (E:\Projects\TEST\svelte5-textarea-error\node_modules\.pnpm\svelte@5.0.0-next.35\node_modules\svelte\src\internal\server\index.js:100:2)
    at Function._render [as render] (E:\Projects\TEST\svelte5-textarea-error\node_modules\.pnpm\svelte@5.0.0-next.35\node_modules\svelte\src\legacy\legacy-server.js:26:18)
    at Module.render_response (E:\Projects\TEST\svelte5-textarea-error\node_modules\.pnpm\@sveltejs+kit@2.3.2_@sveltejs+vite-plugin-svelte@3.0.1_svelte@5.0.0-next.35_vite@5.0.11\node_modules\@sveltejs\kit\src\runtime\server\page\render.js:171:29) 
    at async Module.render_page (E:\Projects\TEST\svelte5-textarea-error\node_modules\.pnpm\@sveltejs+kit@2.3.2_@sveltejs+vite-plugin-svelte@3.0.1_svelte@5.0.0-next.35_vite@5.0.11\node_modules\@sveltejs\kit\src\runtime\server\page\index.js:289:10)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 44.81 GB / 63.93 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.21 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.133)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.35

Severity

blocking an upgrade

brunnerh commented 8 months ago

Looks like an SSR issue, it works in the REPL.

Server output shows the missing reference:

// App.svelte (Svelte v5.0.0-next.35)
// Note: compiler output will change before 5.0 is released!
import * as $ from "svelte/internal/server";
import { writable } from 'svelte/store';

export default function App($$payload, $$props) {
    $.push(false);

    const $$store_subs = {};
    const msg = writable('');

    $$payload.out += `<textarea>`;

    const $$body = $.escape($msg); // <- probably this

    if ($$body) {
        $$payload.out += `${$$body}`;
    } else {}

    $$payload.out += `</textarea>`;
    $.unsubscribe_stores($$store_subs);
    $.pop();
}