@（アットマーク）でファイルをインポートするときのエラー

VSCode（Cursor）でVueのプロジェクトを構築していた際に、componentのインポートでエラーが出て解決するのに時間がかかってしまったのでメモ_φ(･_･

エラー

「モジュール '@/components/Sample.vue' またはそれに対応する型宣言が見つかりません。」

@で読み込みたいが、@/components/Sample.vueでは読み込めない。
~./components/Sample.vueでは読み込める状態。

@（アットマーク）でファイルを読み込む方法を調べたらvite.config.tsに@importするように追加すればいいとみたのに...

import { fileURLToPath } from 'node:url';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

解決

読み込んだコンポーネントが描画されているので、読み込みはできていて、エディタのエラーであることが判明。

調べていると、「VSCodeはtsconfig.jsonファイルを参照してモジュールの解決を行う」という記述を見つけ、vite.config.tsの設定だけでは足りなかったのかもと思い、tsconfig.jsonに以下を追加。

{
  "compilerOptions": {
    ... 省略
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  },
  ... 省略
}

エラーが消えた！
解決！

「vite.config.tsではモジュールの解決をしない？」

以下ChatGPTさんに「vite.config.tsではモジュールの解決をしない？」と聞いた回答

vite.config.tsはViteの設定ファイルで、Viteのビルドプロセスや開発サーバーに影響を与えます。
VSCode等のエディタは、このvite.config.tsを参照してモジュールの解決を行いません。エディタは通常、tsconfig.jsonやjsconfig.jsonのような設定ファイルを参照してモジュールの解決を行います。

したがって、Viteの設定とエディタの設定は一致している必要があります。つまり、vite.config.tsでエイリアスを設定した場合、同じエイリアスをtsconfig.jsonにも設定する必要があります。

とのことです！