【Vite】import エイリアス `@` が解決できないエラーの解決方法

はじめに

Viteを使ったReactプロジェクトで開発しているとき、以下のようなエラーに遭遇

[plugin:vite:import-analysis] Failed to resolve import "@/lib/supabase" from "src/routes/index.tsx". Does the file exist?

このエラーは、@というimportエイリアス（パスエイリアス）が正しく設定されていないために発生します。今回はその解決方法を解説します。

問題

以下のようなコードでエラーが発生している状況です。

src/routes/index.tsx

import { lazyRouteComponent } from "@tanstack/react-router";
import { createFileRoute } from "@tanstack/react-router";
import { supabase } from "@/lib/supabase"; // ← ここでエラー

export const Route = createFileRoute("/")({
  component: lazyRouteComponent($$splitComponentImporter, "component")
});

エラーの原因は以下のいずれかです：

1. パスエイリアス @ が設定されていない
2. ファイル src/lib/supabase.ts が存在しない
3. TypeScriptの設定でパスマッピングができていない

解決方法

1. Viteの設定ファイルを確認・修正

vite.config.ts にパスエイリアスの設定を追加します。

vite.config.ts の設定

vite.config.ts

import { defineConfig } from 'vitest/config'
import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
import { tanstackRouter  } from '@tanstack/router-plugin/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tanstackRouter({ autoCodeSplitting: true }),
    viteReact(),
    tailwindcss(),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, "./src"),
    },
  },
})

2. TypeScriptの設定を確認・修正

tsconfig.json にパスマッピングを追加します。

tsconfig.json の設定

tsconfig.json

{
  "include": ["**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    /* Linting */
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    // パスマッピングの追加
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

おわりに

パスエイリアス @ は、深い階層のファイル構造でも相対パスを使わずに済むため、非常に便利な機能です。

// エイリアスなし（相対パス）
import { supabase } from "../../lib/supabase";

// エイリアスあり（絶対パス風）
import { supabase } from "@/lib/supabase";

一度設定してしまえば、ファイル移動時にimportパスを修正する手間も減ります。

参考

Vite公式ドキュメント - Resolve Alias

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼