Skip to content

Svelte 5: Variable scope issue in the SSR code when using snippets and bind values #11010

@mquandalle

Description

@mquandalle

Describe the bug

Compiling the following component works as expected in SSR mode:

<script>
	import Slider from './Slider.svelte';
	const snippetToRender = snippetWithSlider;
	let sliderValue = $state(0)
</script>

{#snippet snippetWithSlider()}
	<Slider />
{/snippet}
compiles to
export default function App($$payload, $$props) {
	$.push(false);

	const snippetToRender = snippetWithSlider; // It works thanks to function hoisting 

	function snippetWithSlider($$payload) {
		$$payload.out += `<!--[-->`;
		Slider($$payload, {});
		$$payload.out += `<!--]-->`;
	}

	$$payload.out += `<!--[-->`;
	snippetToRender($$payload);
	$$payload.out += `<!--]-->`;
	$.pop();
}

But if I add a bind prop:

  <script>
  	import Slider from './Slider.svelte';
  	const snippetToRender = snippetWithSlider;
+ 	let sliderValue = $state(0)
  </script>
  
  {#snippet snippetWithSlider()}
- 	<Slider />
+ 	<Slider bind:value={sliderValue} />
  {/snippet}
  
  {@render snippetToRender()}
compiles to a code that has a bug with `snippetWithSlider` scope
export default function App($$payload, $$props) {
	$.push(true);

	const snippetToRender = snippetWithSlider; // Not in scope 
	let sliderValue = 0;
	let $$settled = true;
	let $$inner_payload;

	function $$render_inner($$payload) {
		function snippetWithSlider($$payload) {
			$$payload.out += `<!--[-->`;

			Slider($$payload, {
				get value() {
					return sliderValue;
				},
				set value($$value) {
					sliderValue = $$value;
					$$settled = false;
				}
			});

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

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE42QwU7DMAyGXyUySGulah3i1jUTvAIgOBAO3epCpDSJErcCVX135LaDaXDYzbb8f_5_D9BogxGK1wFs1SIUcO89ZEBfnpvYoyGEDKLrwoEnZTwE7WmnrCLdehdIPBpdYxBNcK1YrfO5Xc_S1ZYXD85GEtFq75Ge3ANaFsjj5EXTx6yatg2SiFP7XJkOhRTXkSrCZJMqW-a_BuxwtRD-kpJ0ZFa5mNtrWxc94-Rwwh5FvlN2yBf5OEHvwuzvzO9EhAxaV-tGYw0FhQ7H7Odz86lLn8cpB9EfE7LBam84pBh54IPzMUm3Z5FLbX1Hgk9IBaGy76hAtNpKBRuuqk-p4JbLSOilghsFJ_GnwP_leBu_AaLgX0QNAgAA

Logs

No response

System Info

Repl

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions