I have a problem where I get the following error when deploying my SvelteKit website to Vercel:
> Using @sveltejs/adapter-auto
18:05:29.787 > 404 /about (linked from /)
18:05:29.787 at file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:167:11
18:05:29.787 at visit (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:326:5)
18:05:29.802 Error: Command "npm run build" exited with 1
The website works fine both in dev and build environment locally.
I have been trying all day to fix this and in the process broke my latest website version, which now gives a different error when using npm run dev locally:
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/footer.
Plugin: vite-plugin-svelte
File: /Users/koenraijer/Documents/Code/Svelte/kaashuys/src/lib/footer/Footer.svelte
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/nav.
Plugin: vite-plugin-svelte
File: /Users/koen/Documents/Code/Svelte/kaashuys/src/lib/header/Header.svelte
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/footer.
Plugin: vite-plugin-svelte
File: /Users/koen/Documents/Code/Svelte/kaashuys/src/lib/footer/Footer.svelte
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/nav.
Plugin: vite-plugin-svelte
File: /Users/koen/Documents/Code/Svelte/kaashuys/src/lib/header/Header.svelte
This exact same nav file was imported perfectly fine in the version used to generate the first error message. All of these files are present.
When running npm run preview, suddenly it does work.
First part of my package-lock.json:
{
"name": "blog-template",
"version": "0.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "blog-template",
"version": "0.0.1",
"dependencies": {
"@fontsource/fira-mono": "^4.5.0",
"@lukeed/uuid": "^2.0.0",
"cookie": "^0.4.1",
"scss": "^0.2.4"
},
"devDependencies": {
"@sveltejs/adapter-auto": "next",
"@sveltejs/adapter-static": "^1.0.0-next.26",
"@sveltejs/kit": "next",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"mdsvex": "^0.9.8",
"node-sass": "^7.0.1",
"postcss": "^8.4.5",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"svelte": "^3.44.0",
"svelte-dark-mode": "^2.0.0",
"svelte-preprocess": "^4.10.1",
"typescript": "^4.5.4"
}
},
Other things I've tried:
- run
npm audit, update outdated packages etc. - removed everything scss related, reinstalled svelte-preprocess.
- checked if removing the sveltePreprocess config
scss: prependDataline did anything. - Incrementally added newer parts to the earlier version that did work, but I didn't find manage to find the perpetrator.
I don't know how I broke it or how to fix it...