Error when deploying SvelteKit to Vercel while npm run preview works fine locally

Viewed 461

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: prependData line 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...

0 Answers
Related