Skip to content

Malformed JS created by Svelte 5 migration in specific case #13615

@Conduitry

Description

@Conduitry

Describe the bug

I have no idea how to characterize this situation, but this is my attempt to strip down to more or less a minimal repro from a component in an application of mine that was migrated incorrectly.

This:

<script>
	export let data
	$: ({ foo } = data)

	import { blah } from './blah.js'

	let bar
	$: {
		bar = []
		let baz
	}
</script>

results in:

<script>
	import { run } from 'svelte/legacy';


	import { blah } from './blah.js'
	/** @type {{data: any}} */
	let { data } = $props();

	let bar = $state(
	let { foo } = $derived(data)
	run(() => {
		bar = []
		let baz
	});
</script>

Interestingly, putting a ; after the let bar seems to fix this. None of the other automatic semicolons seem to help or matter if they're explicitly inserted.

If I remove any piece of this, it also no longer happens. (If you're wondering about the stray let baz, in my real application there is additional computation, and baz is a local variable involved in computing bar.)

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACj2OQQrCMBBFrzIMQhWk3YcqeI6mi7RNMJI2IZmKGnJ3k1ZcDe_9z2ciKm1kQNZFXMQskeHNOTwjvV2B8JSGZOZgVz8W04bRa0dXvnCSL2c9gZEEkyBR1IHBMYKyFhJcNnvKOgd63roRBiPuOVTezlDVTcH6Eaq9VaYG4X9LsVxOWeStrt9pr3wKJL60zf-f_OVsJ620nJCRX2Xq0xcFED384AAAAA==

Logs

No response

System Info

n/a

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions