はじめに

公式の環境構築の手順に沿って作成したが、page.svelteとlayout.svelteに「Error in svelte.config.js ...」というエラーが発生しました。今回はそのエラーの解消方法を記録します。

公式手順
https://svelte.dev/docs/svelte/getting-started

エラー内容

"Error in svelte.config.js

Error: Cannot find module @rollup/rollup-darwin-arm64. npm has a bug related to optional dependencies (npm/cli#4828). Please try npm i again after removing both package-lock.json and node_modules directory. svelte"

開発環境

・typescript: "^5.0.0"
・svelte: "^5.0.0"
・node: "v23.1.0"

解決方法

tsconfig.jsonにincludeセクションを追記し、svelteファイルを含めるようにする

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
    },
+    "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

svelte.config.jsをsvelte-preprocessに設定する

import adapter from '@sveltejs/adapter-auto';
+import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
+    preprocess: sveltePreprocess(),

    kit: {
        adapter: adapter()
    }
};

export default config;

必要な依存関係をインストールする

npm install --save-dev svelte-preprocess @sveltejs/adapter-auto

node_modulesとpackage-lock.jsonを削除、キャッシュクリアし、依存関係をインストールする

rm -rf node_modules package-lock.json
npm cache clean --force
npm install