🫥

Nuxt3 + TypeScript で VSCode のエラーが出続ける問題

2023/05/18に公開

前提

  • Nuxt3
  • TypeScript
  • Vite
  • VSCode で開発している(Volar を入れている
  • Storybook で React を入れている

問題

モジュール 'xxx' またはそれに対応する型宣言が見つかりません。 ts(2307)

ビルドは通るのに、 VSCode の警告が表示され続ける。

原因・解決方法

原因は Volar と VSCode のビルトイン拡張機能がコンフリクトして起こっているみたい。

https://stackoverflow.com/questions/54839057/vscode-showing-cannot-find-module-ts-error-for-vue-import-while-compiling-doe

ビルトイン拡張機能の切り方

  1. VSCode の拡張機能タブから、検索窓に @builtin typescript と入力。
  2. TypeScript と JavaScript の言語機能」を無効にする。
  3. 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.configalias を明記するのもあったがデフォルトの値を明記しているだけなので意味がなかった。

Discussion