Skip to content

Fix Vitepreprocess for components using scss (npm run build doesnt finish compiling) #16174

@EAlexis92

Description

@EAlexis92

Describe the bug

When using vitepreprocess (SSR) for components using <style lang="scss"></style> it never finishes compiling unless you kill dart.exe (this is not a fix). You have to use the deprecated sveltePreprocess({` sass: true }), because all projects just never deploy in the hosting. There are other 2 issues about this that were never addressed months ago.

import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import path from 'path'

/** @type {import('@sveltejs/kit').Config} */

const config = {
	preprocess: vitePreprocess(),
	kit: {
        adapter: adapter({
			// // default options are shown. On some platforms
			// // these options are set automatically — see below
			// pages: 'build',
			// assets: 'build',
			// fallback: undefined,
			// precompress: false,
			// strict: true
			runtime: 'nodejs22.x',
		}),
        alias: {
            $houdini: path.resolve('.', '$houdini')
        },
	prerender: {
		handleHttpError: ({ path, referrer, message }) => {
			// ignore deliberate link to shiny 404 page
			if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
				return;
			}

			// otherwise fail the build
			throw new Error(message);
		}
	}
    }
};

export default config;

Here is an image of the issue locally:

Image

An example in firebase (I am not using this hosting, just a test 50 minutes have passed):

Image

My official host in vercel (same thing):

Image

Reproduction

npm run build

Logs

.svelte-kit/output/server/chunks/utils.js                              36.48 kB
.svelte-kit/output/server/chunks/_page.js                             101.49 kB
.svelte-kit/output/server/index.js                                    104.56 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js               190.14 kB
✓ built in 16.29s
Run npm run preview to preview your production build locally.
> Using @sveltejs/adapter-vercel
  ✔ done
> online-store@0.0.1 prepack
> svelte-kit sync && svelte-package && publint
src/lib -> dist

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.80 GB / 15.88 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 11.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (133.0.3065.82)

Severity

blocking all usage of svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions