Skip to main content

Command Palette

Search for a command to run...

Svelte 5 Upgrade: ` Self-closing HTML tags for non-void elements are ambiguous`

Updated
1 min read

There’s a very annoying warning that doesn’t get mentioned in Svelte 5 migration step:

[vite-plugin-svelte] src/user/host/templates/DnsEdit.svelte:169:4 Self-closing HTML tags for non-void elements are ambiguous — use `<i ...></i>` rather than `<i ... />`
https://svelte.dev/e/element_invalid_self_closing_tag

It creates a gazillion of warning since I type <i class="" /> a lot for font awesome icons.

I followed the trail, and it seems that Svelte creator just get enlighten seen from this issue he created: https://github.com/sveltejs/svelte/issues/11052

I was about to get mad since this means a lot of manual work until I came to the end of the thread:

To update your components en masse, you can use the following command:

npx svelte-migrate self-closing-tags

This will prevent Svelte 5 warning you to replace <div /> with <div></div> etc.

It does the job surprisingly well.

There’s also npx svelte-migrate svelte-5 mentioned in svelte-migrate that does migration for runes. It’s another useful and time-saving tool and again, weirdly not mentioned in the migration guide.

403 views

More from this blog

WIIIN0DE

22 posts

Web Developer