Closed6
Svelte + TypeScript + Tailwind CSS の環境構築をしてみる。
Tatsuyaaa前提
- Node.js バージョン管理は、volta。
- npm を使用する。
準備
Node.js, npm を最新化しておく。
volta install node
volta install npm
最新化の結果
- Node.js:
v22.12.0 - npm:
10.9.2
Tatsuyaaa
Svelte 環境構築は上記サイトを参考にする。
npm create svelte@latest my-app
エラー？が発生。
'npm create svelte' has been replaced with 'npx sv create' とのことで、現在は npm create svelte は npx sv create に置き換わったらしい。
npx sv create my-app
その後は以下のような流れで選択していった。
Need to install the following packages:
sv@0.6.6
Ok to proceed? (y) y
┌ Welcome to the Svelte CLI! (v0.6.6)
│
◇ Which template would you like?
│ SvelteKit minimal
│
◇ Add type checking with Typescript?
│ Yes, using Typescript syntax
│
◆ Project created
│
◇ What would you like to add to your project? (use arrow keys / space bar)
│ prettier, eslint, vitest, tailwindcss
│
◇ tailwindcss: Which plugins would you like to add?
│ typography, forms, container-queries
│
◇ Which package manager do you want to install dependencies with?
│ npm
│
◆ Successfully setup add-ons
│
◆ Successfully installed dependencies
│
◇ Successfully formatted modified files
│
◇ Project next steps ─────────────────────────────────────────────────────╮
│ │
│ 1: git init && git add -A && git commit -m "Initial commit" (optional) │
│ 2: npm run dev -- --open │
│ │
│ To close the dev server, hit Ctrl-C │
│ │
│ Stuck? Visit us at https://svelte.dev/chat │
│ │
├──────────────────────────────────────────────────────────────────────────╯
│
└ You're all set!
環境構築できたっぽい？が vite.config.ts にてエラーが発生。
vite.config.ts
import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';
export default defineConfig({
plugins: [sveltekit()], // sveltekit() でエラー発生
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
});
エラー内容
この呼び出しに一致するオーバーロードはありません。
前回のオーバーロードにより、次のエラーが発生しました。
型 'Promise<Plugin<any>[]>' を型 'PluginOption' に割り当てることはできません。
型 'Promise<Plugin<any>[]>' を型 'Promise<false | Plugin<any> | PluginOption[] | null | undefined>' に割り当てることはできません。
型 'Plugin<any>[]' を型 'false | Plugin<any> | PluginOption[] | null | undefined' に割り当てることはできません。
型 'Plugin<any>[]' を型 'PluginOption[]' に割り当てることはできません。
型 'Plugin<any>' を型 'PluginOption' に割り当てることはできません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").Plugin<any>' を型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").Plugin<any>' に割り当てることはできません。
プロパティ 'apply' の型に互換性がありません。
型 '"serve" | "build" | ((this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' を型 '"serve" | "build" | ((this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' に割り当てることはできません。
型 '(this: void, config: UserConfig, env: ConfigEnv) => boolean' を型 '"serve" | "build" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined' に割り当てることはできません。
型 '(this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").ConfigEnv) => boolean' を型 '(this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").ConfigEnv) => boolean' に割り当てることはできません。
パラメーター 'config' および 'config' は型に互換性がありません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig' を型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").UserConfig' に割り当てることはできません。
プロパティ 'plugins' の型に互換性がありません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[] | undefined' を型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").PluginOption[] | undefined' に割り当てることはできません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[]' を型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").PluginOption[]' に割り当てることはできません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption' を型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").PluginOption' に割り当てることはできません。
型 'Plugin<any>' を型 'PluginOption' に割り当てることはできません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").Plugin<any>' を型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").Plugin<any>' に割り当てることはできません。
プロパティ 'apply' の型に互換性がありません。
型 '"serve" | "build" | ((this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' を型 '"serve" | "build" | ((this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' に割り当てることはできません。
型 '(this: void, config: UserConfig, env: ConfigEnv) => boolean' を型 '"serve" | "build" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined' に割り当てることはできません。
型 '(this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").ConfigEnv) => boolean' を型 '(this: void, config: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").ConfigEnv) => boolean' に割り当てることはできません。
パラメーター 'config' および 'config' は型に互換性がありません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").UserConfig' を型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig' に割り当てることはできません。
プロパティ 'plugins' の型に互換性がありません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").PluginOption[] | undefined' を型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[] | undefined' に割り当てることはできません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").PluginOption[]' を型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[]' に割り当てることはできません。
型 'import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").PluginOption' を型 'import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption' に割り当てることはできません。
型 'Promise<Plugin<any> | FalsyPlugin | PluginOption[]>' を型 'PluginOption' に割り当てることはできません。
型 'Promise<Plugin<any> | FalsyPlugin | PluginOption[]>' を型 'Promise<false | Plugin<any> | PluginOption[] | null | undefined>' に割り当てることはできません。
型 'Plugin<any> | FalsyPlugin | PluginOption[]' を型 'false | Plugin<any> | PluginOption[] | null | undefined' に割り当てることはできません。
型 'Plugin<any>' を型 'false | Plugin<any> | PluginOption[] | null | undefined' に割り当てることはできません。
Svelteプロジェクト作成時に、vitest をインストールするようにしたことが怪しそう。
◇ What would you like to add to your project? (use arrow keys / space bar)
│ prettier, eslint, vitest, tailwindcss
vite の型を使用したいのに、vitest で使用している vite の型を参照しようとしていることが原因そう。
◉ 本来使用したい型
import("/Users/user_name/workspace/my-app/node_modules/vite/dist/node/index").Plugin<any>
◉ 誤って参照している型
import("/Users/user_name/workspace/my-app/node_modules/vitest/node_modules/vite/dist/node/index").Plugin<any>
実際にそれぞれの vite のバージョンを確認してみた。
- ルートの package.json の vite のバージョンは
^6.0.0 -
vitest/node_modules/viteのバージョンは^5.0.0
Tatsuyaaaここで役立つのが自分の記事。
これを参考に、ルートの package.json に追記。
package.json
"overrides": {
"vite": "^6.0.0"
}
追記後は、node_modules と package-lock.json を削除し、再インストールを実行。
rm -rf node_modules package-lock.json
npm install
その後 vite.config.ts を確認してみると、エラーは解消された 👏
Tatsuyaaa実際にローカル環境を立ち上げてみる。
npm run dev
> poc-my-blog@0.0.1 dev
> vite dev
Forced re-optimization of dependencies
VITE v6.0.3 ready in 714 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
無事アクセス成功！
このスクラップは13日前にクローズされました