Vite@5以降 + TypeScriptでパスエイリアスを設定する方法

2025年2月4日

Vite@5以降でエイリアスを設定するために必要な手順は以下のとおりです。

viteがビルドできるように、vite.config.ts に resolve.alias を追加する
エディタでインポートエラーにならないように、 tsconfig.app.json に paths と baseUrl を追加する
”@/” をつけてインポートする

1. vite.config.ts に `resolve.alias` を追加する

1
import { defineConfig } from "vite";
2
import react from "@vitejs/plugin-react-swc";
3
import tailwindcss from "@tailwindcss/vite";
4
import path from "path";
5

6
// https://vite.dev/config/
7
export default defineConfig({
8
  resolve: {
9
    alias: {
10
    "@": path.resolve(__dirname, "./src"),
11
    },
12
  },
13
  plugins: [tailwindcss(), react()],
14
});

2. tsconfig.app.json に `paths` と `baseUrl` を追加する

viteのテンプレートバージョン５以降では、tsconfig.json ではなく、tsconfig.app.json を見ています。そのため、tsconfig.jsonにエイリアスを追加してもインポートエラーが解消されません。

1
{
2
  "compilerOptions": {
3
    /* alias */
4
    "baseUrl": ".",
5
    "paths": {
6
      "@*": ["./src/*"]
7
    },
8
    "target": "ES2020",
9
    ...
10
  }

3. インポート時に ’@/’ を使う

”@” だけではパスが解決できません。以下のように ”@/” をつけてインポートします。

1
import { Hoge } from '@/components/Hoge';

ただし、設定で”@“だけでなく、“@components” を追加するとスラッシュは不要になります。

Vite@5以降 + TypeScriptでパスエイリアスを設定する方法

1. vite.config.ts に resolve.alias を追加する

2. tsconfig.app.json に paths と baseUrl を追加する

3. インポート時に ’@/’ を使う

関連記事

Vite + TanStack Router - 4. パラメータの取り扱い

Vite + TanStack Router - 3. ルートの遷移

Vite + TanStack Router - 2. パスとルートの割り当て

Vite + TanStack Router - 1. セットアップ

`TypeError: Unknown file extension ".ts"` エラー

Value Objectの代わりにBranded Typesを使う

1. vite.config.ts に `resolve.alias` を追加する

2. tsconfig.app.json に `paths` と `baseUrl` を追加する