Add support for Vite 5

[tonprince]

Describe the problem

Please add support for Vite 5. When updating to version 5, I got an error when running npm i with the latest Sveltekit version:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @sveltejs/kit@1.27.6
npm ERR! Found: vite@5.0.0
npm ERR! node_modules/vite
npm ERR!   dev vite@"^5.0.0" from the root project
npm ERR!   peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0" from vitefu@0.2.5
npm ERR!   node_modules/vitefu
npm ERR!     vitefu@"^0.2.4" from @sveltejs/vite-plugin-svelte@2.5.2
npm ERR!     node_modules/@sveltejs/kit/node_modules/@sveltejs/vite-plugin-svelte
npm ERR!       @sveltejs/vite-plugin-svelte@"^2.5.0" from @sveltejs/kit@1.27.6
npm ERR!       node_modules/@sveltejs/kit
npm ERR!         dev @sveltejs/kit@"^1.27.6" from the root project
npm ERR!         1 more (@sveltejs/adapter-vercel)
npm ERR!       1 more (@sveltejs/vite-plugin-svelte-inspector)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^4.0.0" from @sveltejs/kit@1.27.6
npm ERR! node_modules/@sveltejs/kit
npm ERR!   dev @sveltejs/kit@"^1.27.6" from the root project
npm ERR!   peer @sveltejs/kit@"^1.5.0" from @sveltejs/adapter-vercel@3.0.3
npm ERR!   node_modules/@sveltejs/adapter-vercel
npm ERR!     dev @sveltejs/adapter-vercel@"^3.0.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vite@4.5.0
npm ERR! node_modules/vite
npm ERR!   peer vite@"^4.0.0" from @sveltejs/kit@1.27.6
npm ERR!   node_modules/@sveltejs/kit
npm ERR!     dev @sveltejs/kit@"^1.27.6" from the root project
npm ERR!     peer @sveltejs/kit@"^1.5.0" from @sveltejs/adapter-vercel@3.0.3
npm ERR!     node_modules/@sveltejs/adapter-vercel
npm ERR!       dev @sveltejs/adapter-vercel@"^3.0.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Describe the proposed solution

Update Sveltekit and adapters to support latest release of Vite 5.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[vnphanquang]

With pnpm I did not have the reported peer-dependency problem. However, I found another issue related to vite 5 and will list it down here, but let me know if a separate issue is better.

Describe the problem

Paths for font assets are incorrect in build output. For example:

In vite 4: /_app/immutable/assets/font.woff2 (correct)
In vite 5: /_app/immutable/assets/nodes/font.woff2 (incorrect)

Note the added nodes directory. The actual font file still lives at /_app/immutable/assets/ and not in nodes. This nested nodes folder seems to be new in vite 5, it nows hosts all the built css.

Reproduction

1. Bootstrap the demo project with npm create svelte@latest (use Svelte 4, not 5)
2. Upgrade to vite 5 and install dependencies
3. Build pnpm build
4. Preview pnpm preview
5. Go to /about page
6. Verify in network tab, fonts files are 404 (there should also be console logs)

[teemingc]

With pnpm I did not have the reported peer-dependency problem. However, I found another issue related to vite 5 and will list it down here, but let me know if a separate issue is better.

Describe the problem

Paths for font assets are incorrect in build output. For example:

In vite 4: /_app/immutable/assets/font.woff2 (correct) In vite 5: /_app/immutable/assets/nodes/font.woff2 (incorrect)

Note the added nodes directory. The actual font file still lives at /_app/immutable/assets/ and not in nodes. This nested nodes folder seems to be new in vite 5, it nows hosts all the built css.

Reproduction

1. Bootstrap the demo project with npm create svelte@latest (use Svelte 4, not 5)
2. Upgrade to vite 5 and install dependencies
3. Build pnpm build
4. Preview pnpm preview
5. Go to /about page
6. Verify in network tab, fonts files are 404 (there should also be console logs)

Thanks for reporting this. Can you please open a new issue with a downloadable repository? @vnphanquang

[vnphanquang]

@eltigerchino will do, should this be a bug or a feature request? I feel that it's both so not sure what to do...

[teemingc]

@eltigerchino will do, should this be a bug or a feature request? I feel that it's both so not sure what to do...

A bug request template should do

[vnphanquang]

@eltigerchino #11085 please let me know if any additional info is needed. Thanks 🙏

[mihaipoenaru]

Can confirm I have the same issue. I'm not sure if vite 5 has any spicy updates except for performance, but it is a bit of an inconvenience to undo its upgrade every time I run an ncu -u

[Daschi1]

Can confirm I have the same issue. I'm not sure if vite 5 has any spicy updates except for performance, but it is a bit of an inconvenience to undo its upgrade every time I run an ncu -u

As a temporary fix for that, you could use ncu -u -x vite, which will exclude vite from the dependency upgrade.

[microdou]

@mihaipoenaru You may create a .ncurc file to mitigate the inconvenience :)

{
  "reject": [
    "vite"
  ]
}

[xmlking]

with Vite 5, when I build/preview prerender pages are missing CSS lines in HTML

when I switch back, to Vite 4.5.0 there are getting generated. e.g.,

[jasperkelder]

I'm using Bun as package manager and adapter-auto. Doing a local build and preview with Vite 5 causes no problems, but deployment to Vercel doesn't work right now:

bun install v1.0.13 (f5bf67bd)
 + vite@5.0.2
 9 packages installed [243.00ms]
error: linking esbuild: FileNotFound
Running "bun run build"
$ vite build
✘ [ERROR] Cannot start service: Host version "0.18.20" does not match binary version "0.19.7"
1 error
failed to load config from /vercel/path0/vite.config.ts
error during build:
Error: The service was stopped: write EPIPE

Switching Vercel's default Node.js 18.x to their 20.x beta didn't work either.