Skip to content

Cannot use yielded value in bind:this inside #each #4317

@jesperp

Description

@jesperp

Describe the bug
The title is a bit of a mouthful so I think a simple example explains it better:

https://svelte.dev/repl/2dc797d2d76b4663987a165f898fdd92?version=3.17.3

<script>
	let name = 'world';
	function* foo() {
		yield {name: "h", value: 123}
		yield {name: 'x', value: 333}
		
	}
	let things = {}
</script>


<h1>Things! {new Date()}</h1>

{#each [...foo()] as f,i}
  <!-- This will crash because of f.name: -->
  <input bind:this={things[f.name]} value={f.value}> 
{/each}

<pre>
	This was bound: {JSON.stringify(things, undefined, 2)}
</pre>

Logs
No logs, it just hangs

To Reproduce
Run the REPL, the bad code is commented out so it wont crash your browser:
https://svelte.dev/repl/2dc797d2d76b4663987a165f898fdd92?version=3.17.3

Expected behavior
I would be expected to be able to bind:this using a yielded value

A strange thing is if I store the list in a new variable which I then use in #each it works as expected:

const fooList = [...foo()]

... 
{#each fooList as f,i}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions