I'm trying to use the static site generator adapter for SvelteKit. I tried making a clean minimal SvelteKit project using npx sv create my-app
and added adapter-static
and verified that it worked, yet doing the same to my existing SvelteKit project continues to fail and I have no idea why. I put console.log
statements in both the svelte and vite configs, but I only saw the vite config log when I ran npm run build
, so it seems to me that Vite isn't loading my Svelte config which has my adapter. I even tried copying the versions from the package.json
of the clean project but that did nothing either. Anyone have an idea here?
This is my svelte.config.ts
:
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: [vitePreprocess({ script: true })],
kit: {
adapter: adapter(),
prerender: {
// Optionally specify which pages to prerender or not
entries: ['*'] // This will prerender all routes, which is useful for static sites
}
}
};
export default config;
and this is my vite.config.ts
:
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
export default defineConfig({
plugins: [sveltekit()],
build: {
target: 'esnext',
},
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
});
and these are my dependencies in package.json
:
...
"devDependencies": {
"@playwright/test": "^1.28.1",
"@skeletonlabs/skeleton": "^2.10.3",
"@skeletonlabs/tw-plugin": "^0.4.0",
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.7.4",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tailwindcss/forms": "^0.5.10",
"@types/d3-scale": "^4.0.8",
"@types/eslint": "^8.56.0",
"@types/node": "^20.12.7",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.16",
"chart.js": "^4.0.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.46.0",
"postcss": "^8.4.32",
"postcss-load-config": "^5.0.2",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.7",
"prettier-plugin-tailwindcss": "^0.5.9",
"svelte": "^5",
"svelte-check": "^3.6.0",
"svelte-preprocess": "^6.0.3",
"svelte-transition": "^0.0.17",
"tailwindcss": "^3.3.6",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.4.10",
"vitest": "^1.2.0"
},
"type": "module",
"dependencies": {
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-plugin-datalabels": "^2.2.0",
"compute-covariance": "^1.0.1",
"d3": "^7.9.0",
"d3-scale": "^4.0.2",
"firebase": "^11.2.0",
"mathjs": "^14.0.1",
"ts-node": "^10.9.2"
}
...
This seems incredibly dumb to me, but the solution was to rename svelte.config.ts
to svelte.config.js
. No errors in my terminal made this clear to me, but I found this doc file: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#config-file-resolving. Annoyingly, the sveltekit
plugin for Vite doesn't allow you specify the config file (but the svelte
plugin, which sveltekit
wraps, does have this option). Seems like a massive oversight by the devs here.