How to fix svelte.head and svelte.body issue

I recently upgraded my SvelteKit version to 1.0.0-next.350 and when I ran npm run dev I got this error on the page:


Error: %svelte.head% in src/app.html should be replaced with %sveltekit.head%

If you’re getting this issue, it’s because SvelteKit has made some breaking updates.

Here’s how to solve this issue.

The answer

Replace all svelte. keywords in your app.html file to sveltekit.!

Feel free to copy the code below:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<link rel='stylesheet' href='%sveltekit.assets%/global.css'>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
	</head>
	<body>
		%sveltekit.body%
	</body>
</html>

I like to tweet about code and post helpful code snippets. Follow me there if you would like some too!