【Viteエラー解決】vite-tsconfig-paths が見つからない問題の対処法

はじめに

React + Vite プロジェクトを新しく作成し、開発サーバーを起動しようとしたところ、
以下のエラーが発生しました。

> vite

failed to load config from ~/project-name/vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-tsconfig-paths'

問題

vite.config.ts 内で vite-tsconfig-paths をインポートしている

しかし node_modules にインストールされていない

結果、「Cannot find package 'vite-tsconfig-paths'」 エラーが発生し、開発サーバーが起動できない

解決方法

1. vite-tsconfig-paths を使いたい場合

以下のコマンドでインストール

npm install vite-tsconfig-paths -D
# または
yarn add -D vite-tsconfig-paths

その後、vite.config.ts は以下のように設定します。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

2. 不要な場合

もし vite-tsconfig-paths を使わないなら、
vite.config.ts から以下を削除すればOk

import tsconfigPaths from "vite-tsconfig-paths";

// plugins: [react(), tsconfigPaths()],
plugins: [react()],

---

おわりに

エラーの原因は vite.config.ts で指定したプラグインが未インストールだったことにあった。
解決方法は インストールするか、設定から削除するかの2択。