Using @const with shadowed variable compiles incorrect code

[saibotsivad]

Describe the bug

If I use Optional Chaining with findIndex as part of @const the output code is incorrect. See REPL for a reproduction.

What I did

The Svelte line is:

{@const legId = legs.findIndex(rel => rel.id === error?.legId)}

What happens

The compiled relevant line of JS output is:

function get_each_context(ctx, list, i) {
	const child_ctx = ctx.slice();
	child_ctx[2] = list[i];
	const constants_0 = /*legs*/ child_ctx[1].findIndex(rel => rel.id === /*error*/ child_ctx[2]?./*legId*/ child_ctx[3]);
	child_ctx[3] = constants_0;
	return child_ctx;
}

In particular the part /*error*/ child_ctx[2]?./*legId*/ child_ctx[3]

This throws the error child_ctx[2].child_ctx is undefined.

What I expect to happen

The compiled line of JS output, for that findIndex function, should be:

const constants_0 = /*legs*/ child_ctx[1].findIndex(rel => rel.id === /*error*/ child_ctx[2]?.legId);

Reproduction

https://svelte.dev/repl/7e3c2e5fe9f14634a2bc4cbdfeffb615?version=3.46.6

Logs

No response

System Info

Firefox 98.0.2

Severity

annoyance

[saibotsivad]

To anyone else running into this, one workaround for this issue is simply moving the executing code out:

<script>
	const errors = [{ legId: 'L1' }]
	const legs = [{ id: 'L1' }]
	const finder = error => rel => rel.id === error?.legId
</script>

<ul>
	{#each errors as error}
	{@const legId = legs.findIndex(finder(error))}
		<li>
			Leg ID: {legId}
		</li>
	{/each}
</ul>

[bluwy]

It doesn't seem that optional chaining is tripping the compiler. It's because in error.legId, the legId is the same as the @const variable name legId, and Svelte incorrectly maps it. A workaround is to change the variable name:

<ul>
	{#each errors as error}
	{@const myLeg = legs.findIndex(rel => rel.id === error?.legId)}
		<li>
			Leg ID: {myLeg}
		</li>
	{/each}
</ul>

[baseballyama]

Duplicate of #7206