🫥
Nuxt3 + TypeScript で VSCode のエラーが出続ける問題
前提
- Nuxt3
- TypeScript
- Vite
- VSCode で開発している(Volar を入れている)
- Storybook で React を入れている
問題
モジュール 'xxx' またはそれに対応する型宣言が見つかりません。 ts(2307)
ビルドは通るのに、 VSCode の警告が表示され続ける。
原因・解決方法
原因は Volar と VSCode のビルトイン拡張機能がコンフリクトして起こっているみたい。
ビルトイン拡張機能の切り方
- VSCode の拡張機能タブから、検索窓に
@builtin typescript
と入力。 - 「TypeScript と JavaScript の言語機能」を無効にする。
- VSCode を再起動
自分はとりあえずこれで解決しました。
以下に一通り試したことも残しておきます。
試したこと
ts.config にパスを明記
tsconfig.json
{
// ...
"compilerOptions": {
"baseUrl": "." ,
"paths": {
"~/*": ["./src/*"],
"@/*": ["./src/*"]
},
},
// ...
}
改善せず。
ts.config に includes を追加
tsconfig.json
{
"include": [
"./src/**/*.ts",
"./src/**/*.vue"
],
}
エラーが大量に出たのでやめた。
vite-tsconfig-paths
プラグインの追加
改善せず。
vite.config に alias を明記
vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
"@": "./src/*",
},
},
})
改善せず。
nuxt.config
に alias
を明記するのもあったがデフォルトの値を明記しているだけなので意味がなかった。
Discussion