はじめに
公式の環境構築の手順に沿って作成したが、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