Bad compilation of valid Svelte 4 components under Svelte 5

[arackaf]

Describe the bug

Repo is here https://github.com/arackaf/svelte-5-build-debug

Deploy it to Vercel, and you'll see these errors

---

If you check the git history, commit 1c2912b229c7a4efbb41f444e3ee7584f7d7ced5 imports adapter-vercel in order to set edge runtime settings. If you revert that commit, then the deployment suddenly works.

So it looks like adapter-vercel is doing something weird.

Reproduction

See above

Logs

n/a

System Info

System:
    OS: macOS 14.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 976.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/Cellar/nvm/0.38.0/versions/node/v20.10.0/bin/node
    Yarn: 1.22.22 - /usr/local/Cellar/nvm/0.38.0/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - /usr/local/Cellar/nvm/0.38.0/versions/node/v20.10.0/bin/npm
    pnpm: 8.14.0 - /usr/local/Cellar/nvm/0.38.0/versions/node/v20.10.0/bin/pnpm
    bun: 1.0.36 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 126.1.67.119
    Chrome: 126.0.6478.127
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.168

Severity

blocking an upgrade

[Rich-Harris]

No need to deploy; pnpm build will suffice.

The reason adapter-vercel is relevant is that it introduces esbuild into the mix, in order to generate self-contained JS modules for the edge runtime. esbuild fails if it sees an assignment to a constant.

Given code like this...

<script>
  import Input from "./Input.svelte";
</script>

{#each ['tom', 'dick', 'harry'] as author}
  <Input bind:value={author} />
{/each}

...Svelte generates this wall of gibberish in SSR mode:

import * as $ from "svelte/internal/server";
import Input from "./Input.svelte";

export default function App($$payload) {
  let $$settled = true;
  let $$inner_payload;

  function $$render_inner($$payload) {
    const each_array = $.ensure_array_like(['tom', 'dick', 'harry']);

    $$payload.out += `<!--[-->`;

    for (let $$index = 0; $$index < each_array.length; $$index++) {
      const author = each_array[$$index];

      $$payload.out += "<!--[-->";
      $$payload.out += `<!--[-->`;

      Input($$payload, {
        get value() {
          return author;
        },
        set value($$value) {
          author = $$value;
          $$settled = false;
        }
      });

      $$payload.out += `<!--]-->`;
      $$payload.out += "<!--]-->";
    }

    $$payload.out += "<!--]-->";
  };

  do {
    $$settled = true;
    $$inner_payload = $.copy_payload($$payload);
    $$render_inner($$inner_payload);
  } while (!$$settled);

  $.assign_payload($$payload, $$inner_payload);
}

This all exists because in Svelte 4, if a child component initializes a binding whose value is undefined, the change has to propagate back up to the parent. This is a rare edge case that significantly slows down SSR and only happens if you've built your app badly (bindings should always have an initial value) and as such we skip all that in runes mode.

(Side-note: if you opt the component into runes mode (which needs <svelte:options runes> in this case since it's not using any runes) then you get a compile error, because updating the current each block value is like reassigning a function parameter — it makes no sense. Svelte 4 tries to figure out which values are actually being updated when you do that, but it frequently gets it wrong and causes cascading invalidations, so this sort of reassignment is forbidden in runes mode.)

Luckily, this is an easy fix, because Svelte 4 doesn't properly invalidate everything — it just... reassigns the function parameter:

do {
  $$settled = true;

  // $$result.head is mutated by the literal expression
  // need to reset it if we're looping back to prevent duplication
  $$result.head = previous_head;

  $$rendered = `${each(authors, author => {
    return `${validate_component(Input, "Input").$$render(
      $$result,
      { value: author },
      {
        value: $$value => {
          author = $$value;
          $$settled = false;
        }
      },
      {}
    )}`;
  })}`;
} while (!$$settled);

As such I think all we need to do is turn the const to a let and esbuild will be just fine with the whole thing.

[arackaf]

@Rich-Harris Can you please clarify this?

This all exists because in Svelte 4, if a child component initializes a binding whose value is undefined, the change has to propagate back up to the parent. This is a rare edge case that significantly slows down SSR and only happens if you've built your app badly (bindings should always have an initial value)

Which bindings are undefined in my code? If you mean the book prop that's passed through multiple layers, I can initialize it to null at each and every component, but the error remains.

[Rich-Harris]

They're not. But as far as the compiler is concerned, they could be

[justingolden21]

I know I'm in the future and replying to a closed ticket, but I recently tried to deploy my svelte 5 site to Netlify (which has always worked) and even with no code diff it fails with:

ReferenceError: $$render_inner is not defined

It builds fine locally and built fine until very recently. When I google "$$render_inner " this is one of two results, and the other is a github action.

EDIT: Bump @sveltejs/kit from 2.15.1 to 2.20.6 fixed it

[PlkMarudny]

Another mesage from the future: the error appeared for me as well, on "^5.25.3". Main route redirects to /editor, and reloading the /editor page produces the error, Node adapter.

ReferenceError: $$render_inner is not defined
    at _page (<path>/src/routes/editor/+page.svelte:1461:3)
    at children (<path>/.svelte-kit/generated/root.svelte:159:9)
    at _layout (<path>\src\routes\editor\+layout.svelte:23:37)
    at children <path>/.svelte-kit/generated/root.svelte:76:6)
    at _layout (<path>\src\routes\+layout.svelte:50:18)
    at Root (<path>/.svelte-kit/generated/root.svelte:65:3)
    at render (<path>\node_modules\.pnpm\svelte@5.25.3\node_modules\svelte\src\internal\server\index.js:134:2)
    at Function._render [as render] (<path>\node_modules\.pnpm\svelte@5.25.3\node_modules\svelte\src\legacy\legacy-server.js:27:24)       
    at render_response (<path>\node_modules\.pnpm\@sveltejs+kit@2.20.7_@sveltejs+vite-plugin-svelte@5.0.3_svelte@5.25.3_vite@6.3.2_@types+node@_6s7xx7u6kfdlu5ban4utkapzsu\node_modules\@sveltejs\kit\src\runtime\server\page\render.js:192:29)
    at async render_page (<path>\node_modules\.pnpm\@sveltejs+kit@2.20.7_@sveltejs+vite-plugin-svelte@5.0.3_svelte@5.25.3_vite@6.3.2_@types+node@_6s7xx7u6kfdlu5ban4utkapzsu\node_modules\@sveltejs\kit\src\runtime\server\page\index.js:299:10)

[PlkMarudny]

This happens during SSR, export const ssr = false fixes it, but...

[justingolden21]

I'm running into this error again and no pacakges changed. I tried updating everything and still get this. This thread is the only thing on google for "$$render_inner is not defined"

Anybody have any ideas?