Solution: > src/app.html is missing %svelte.head% in Netlify

The quick and easy fix to the src/app.html is missing %svelte.head% build error in Netlify.

Solution: > src/app.html is missing %svelte.head% in Netlify

Over a week ago, after updating to the latest version of SvelteKit, I got the following browser message when running a SvelteKit instance in development:

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

I thought nothing of it and changed all %svelte.body% etc with %sveltekit.body% as follows:

src/app.html

Now I could continue working on my site, but when I went to build the updated site on Netlify, I got this error:

src/app.html is missing %svelte.head% in Netlify.

I was lazy, so all I did was go back to src/app.html and replace %sveltekit.body% etc with %svelte.body%. I pushed it to Github and then Netlify had no issues building the site.

I thought nothing of it until I updated several other sites. It got annoying having to constantly edit src/app.html so I decided to resolve this issue. I had a busy schedule the last week which added to the frustration. I even posted in the Netlify Forums which directed me to find a solution.

I knew it had to do with with the Netlify Adapter for Svelte. I was using the Auto Adapter which should automatically choose the environment I am deploying on. Then, thanks to Nyx on the Svelte Discord, I was able to resolve and fix my build issue.

Eleven days ago from the writing of this post, SvelteKit was updated to replace %svelte.body% etc with %sveltekit.body%. In layman terms, this was to differentiate a SvelteKit from Svelte. If I had paid attention to the change logs, I would have caught this.

The Quick and Easy Fix

In svelte.conf.js, change your adapter to @sveltejs/adapter-netlify. Then in package.json, make sure you have the following configurations in your dependencies:

"@sveltejs/adapter-netlify": "next",

"@sveltejs/kit": "next",

Then do  upgrade as follows:

% pnpm upgrade @sveltejs/adapter-netlify && pnpm upgrade @sveltejs/kit

Your package.json should look like this after the upgrade:

"@sveltejs/adapter-netlify": "1.0.0-next.64",        

"@sveltejs/kit": "1.0.0-next.347",

Deploy to Netlify and the error should disappear. I have not tested this with @sveltejs/adapter-auto.

Questions

Hopefully this will help those new to SvelteKit when coming across this build error. If you have any questions, just send me a direct message at my Twitter account: @MatsunagaKevin.

Subscribe to Kevin Matsunaga

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe