Help on actual steps for updating Sveltekit versions

[tobylewis]

I've been using Svelte and SvelteKit for a few months now and am loving the experience. I see there is a change to the routing structure and realise I have not updated versions since I started and find I am a bit clueless as to how I actually do this.

The Migration guide says "We recommend updating to the most recent version before these changes — @sveltejs/[email protected] — and ensuring that your app works".

So what do I do? Edit package.json directly? run npm install with the new version. What exact syntax should be used? As trying the above with variants of "1.0.0-next.404", "next.404" all seem to give errors. Just doing npm update does not change the version in package-lock.json from the next.326 version that was installed originally.

I realise this is more of an npm question than svelte and I have looked in the npm and svelte docs for answers, but hoping someone could shed some light.

Hopefully there is a two line answer saying "edit this line of package.json and then run npm update or whatever"

Thanks
Toby

[geoffrich]

You should run npm i @sveltejs/[email protected] to install that version.

[tobylewis]

Hi Geoff
Thanks for the swift reply. This still gives the sort of error I was getting before posting the question. Any other tips?

tobylewis$ npm i @sveltejs/[email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @sveltejs/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

[geoffrich]

Ah, you need to install next.405, not next.404. Not sure why you can't install 404, but 405 is the version before the breaking changes (which were introduced in next.406).

[tobylewis]

OK, it wasn't clear if 405 was the breaking version so dropping back to 404 seemed safer, but I guess not all versions can be installed?

I did get further with 405 which said there was a conflicting vite dependency

Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0" from @sveltejs/[email protected]
npm ERR!   node_modules/@sveltejs/kit
npm ERR!     dev @sveltejs/kit@"1.0.0-next.405" from the root project

So I uninstalled svelte/kit with npm uninstall and tried again

tobylewis$ npm i @sveltejs/[email protected] --force
npm WARN using --force Recommended protections disabled.
npm ERR! code 1
npm ERR! path /Users/tobylewis/Google Drive/SvelteDev/CogCoincide/node_modules/@sveltejs/kit
npm ERR! command failed

and again with the -D flag but got the same.

I'm not asking you to sort this out, since if this is the correct command then there is something wrong on my setup and I will investigate myself, but hopefully this discussion will point others in the right direction. I'll come back with any solutions I find.

[geoffrich]

The latest SvelteKit now requires Vite v3 (as of next.373). You might need to also run npm i vite@3. I remember getting this error at one point, but I can't remember if I didn't to do anything else to solve it.

[tobylewis]

I have managed to do the update. In case this helps future travellers. I was a bit thrown by the syntax of the svelte versions "1.0.0-next.405" and have no idea how this might work with the ^ notations. However one can use the npm command
npm install <package>@<version>
npm i @sveltejs/[email protected]

or edit the line in the packages.json file and run npm install
"@sveltejs/kit": "1.0.0-next.405",

These didn't work for me initially so I created a new project, copied across the packages.json file, deleted my old node_modules and then ran npm install.

This added the line for "vite": "^3.0.4" mentioned above by Geoff. I knew sveltekit used vite and that it had not previously been in the packages list. But I now understand that sveltkit has changed to simply be a plugin on vite and vite is now outside rather than inside sveltekit, hence the need to add it to the packages.

There was still an issue causing problems so I copied across the vite.config.js and svelte.config.js files from the new project. I had added an alias for $root/lib replacing the standard $lib in svelte.config.js as suggested here https://joyofcode.xyz/sveltekit-for-beginners

The prepare script installing sveltekit seemed to be objecting to these aliases and replacing these files cleared the way for full install. I then moved in all the other dependencies from my old packages.json file and ran install once more.

It seemed 405 is post routes change as I got messages telling me I needed to update them.

I was then able to run the npx svelte-migrate routes command to convert my routes.

Now I need to tidy up and get my code working again.

[janzheng]

Does this mean there's no way to run previous Sveltekit versions using the previous routing mechanism, to fix bugs? Will they all just break? Nvm I'm an idiot. In case ppl make my stupid mistake:

Wrong:@sveltejs/kit": "^1.0.0-next.405
Right:@sveltejs/kit": "1.0.0-next.405