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:
Now I could continue working on my site, but when I went to build the updated site on Netlify, I got this error:
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:
Then do upgrade as follows:
% pnpm upgrade @sveltejs/adapter-netlify && pnpm upgrade @sveltejs/kit
Your package.json should look like this after the upgrade:
Deploy to Netlify and the error should disappear. I have not tested this with @sveltejs/adapter-auto.
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.