Svelte 5: runes-mode compiler validation errors throw "undefined"

[zuckschwerdt]

Describe the bug

I just noticed that any plain on…="…" attributes (e.g. onclick="…") in component html will break the build if there are still deprecated on:… (e.g. on:click="…") attributes present in the same file, but with an obscure error message:

error during build:
undefined

A fix of course is to only use exclusively the new or deprecated syntax -- but I guess there is some compiler problem or at least an opportunity for a better error message :)

This might be a fix for #13883.

Reproduction

$ npm create vite@latest
✔ Select a framework: › Svelte
✔ Select a variant: › JavaScript

$ npm install
$ npm run build

vite v5.4.10 building for production...
…
✓ built in 174ms

# Add any on-attribute, e.g.
$ vi src/App.svelte
<div onclick={() => console.log('hi')}>

$ npm run build

vite v5.4.10 building for production...
✓ 51 modules transformed.
x Build failed in 84ms
error during build:
undefined

Logs

see reproduction

System Info

Node: 22.8.0
npm: 10.8.2

@sveltejs/vite-plugin-svelte: 4.0.0
svelte: 5.1.1
vite: 5.4.10

Severity

annoyance

[zuckschwerdt]

For me InternalCompileError i.e. CompileDiagnostic can't be thrown.
If I wrap throw new InternalCompileError(…) as throw new Error(new InternalCompileError(…)) it seems to somewhat work.

[rudiv]

This is more widespread, thanks @zuckschwerdt for the throw wrapping trick.

It's also happening when there's a <tr> directly inside a <table>:

Whereas it should be:

Whilst we're at it, the difficult to find breaking changes area (especially since this works in dev mode) lists it under "Breaking Changes in runes mode", which we're not in. Shouldn't this be under "Other breaking changes".

https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-HTML-structure-is-stricter

This should probably throw an error in dev also.

[szethh]

I'm running into the same issue here, trying to migrate a codebase from svelte 4 to 5. vite build fails with:

vite v5.4.4 building SSR bundle for production...
✓ 17 modules transformed.
x Build failed in 350ms
error during build:
undefined

Running dev mode also throws:

11:42:42 AM [vite] Pre-transform error: .svelte-kit/generated/root.svelte:48:68 `</p>` attempted to close an element that was not open
11:42:42 AM [vite] Error when evaluating SSR module /.svelte-kit/generated/root.js:
|- 

11:42:42 AM [vite] Error when evaluating SSR module /.svelte-kit/generated/server/internal.js:
|- 

11:42:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/@sveltejs+kit@2.5.27_@sveltejs+vite-plugin-svelte@4.0.0_svelte@5.0.0_vite@5.4.4/node_modules/@sveltejs/kit/src/runtime/server/index.js:
|-

Inspecting the file and line number that throws the error (.svelte-kit/generated/root.svelte:48:68) shows this:

{#if constructors[1]}
	{@const Pyramid_0 = constructors[0]}
	<!-- svelte-ignore binding_property_non_reactive -->
	<Pyramid_0 bind:this={components[0]} data={data_0} {form}>  <!-- eslint shows error in this line! -->
	<!-- svelte-ignore binding_property_non_reactive -->
		<Pyramid_1 bind:this={components[1]} data={data_1} {form} />
	</Pyramid_0>
{:else}
	{@const Pyramid_0 = constructors[0]}
	<!-- svelte-ignore binding_property_non_reactive -->
	<Pyramid_0 bind:this={components[0]} data={data_0} {form} />
{/if}

All <p> tags in my code have valid html -- I even replaced all of them with <div>s while debugging and the error did not change.

[seriousme]

What worked for me was: https://svelte.dev/docs/svelte/v5-migration-guide#Migration-script
It didn't solve everything,but at least I got better error message while running in dev mode.
From there on it was possible for me to finalize the migration.

Hope this helps!

[szethh]

https://svelte.dev/docs/svelte/v5-migration-guide#Migration-script

yeah, i ran the migration script to change all export let to props etc. I also fixed all the instances where the script could not do it automatically. There is no old svelte 4 syntax in my project anymore, so I don't even know where the error is coming from

[paoloricciuti]

Install the latest version of svelte and you should be getting more descriptive errors during build

[szethh]

Updated to latest, I see this now on vite build:

vite v5.4.10 building SSR bundle for production...
✓ 17 modules transformed.
x Build failed in 339ms
error during build:
[vite-plugin-svelte] [plugin vite-plugin-svelte] .svelte-kit/generated/root.svelte (48:68): .svelte-kit/generated/root.svelte:48:68 `</p>` attempted to close an element that was not open
file: /Users/szeth/dev/myproject/.svelte-kit/generated/root.svelte:48:68

 46 |    {@const Pyramid_0 = constructors[0]}
 47 |                <!-- svelte-ignore binding_property_non_reactive -->
 48 |  <p>                                                      <Pyramid_0 bind:this={components[0]} data={data_0} {form}></p>
                                                                           ^
 49 |                  <!-- svelte-ignore binding_property_non_reactive -->
 50 |  <p>                                                                              <Pyramid_1 bind:this={components[1]} data={data_1} {form} />

Note that if I inspect .svelte-kit/generated/root.svelte:48:68, it does not contain <p> tags anywhere in the file (see my other comment on this issue).

Also, this "pyramid" code is not part of my codebase.

[zuckschwerdt]

Fixed in 5.1.4

[paoloricciuti]

Updated to latest, I see this now on vite build:

vite v5.4.10 building SSR bundle for production...
✓ 17 modules transformed.
x Build failed in 339ms
error during build:
[vite-plugin-svelte] [plugin vite-plugin-svelte] .svelte-kit/generated/root.svelte (48:68): .svelte-kit/generated/root.svelte:48:68 `</p>` attempted to close an element that was not open
file: /Users/szeth/dev/myproject/.svelte-kit/generated/root.svelte:48:68

 46 |    {@const Pyramid_0 = constructors[0]}
 47 |                <!-- svelte-ignore binding_property_non_reactive -->
 48 |  <p>                                                      <Pyramid_0 bind:this={components[0]} data={data_0} {form}></p>
                                                                           ^
 49 |                  <!-- svelte-ignore binding_property_non_reactive -->
 50 |  <p>                                                                              <Pyramid_1 bind:this={components[1]} data={data_1} {form} />

Note that if I inspect .svelte-kit/generated/root.svelte:48:68, it does not contain <p> tags anywhere in the file (see my other comment on this issue).

Also, this "pyramid" code is not part of my codebase.

Can you provide a reproduction? The pyramid code is part of the generated sveltekit app.

[szethh]

sure, https://github.com/szethh/claraa.dev/tree/sv5

[paoloricciuti]

It's a 404 for me

[szethh]

sorry about that, forgot the project was private. should be public now