Vite 6でTailwindCSSのESMエラーを解決する方法

問題

Vite 6にアップグレードしたReactプロジェクトにTailwindCSS v4を追加すると、次のエラーが発生します：

✘ [ERROR] Failed to resolve "@tailwindcss/vite". This package is ESM only but it was tried to load by `require`.

このエラーは、ESM（ECMAScript Modules）のみに対応している@tailwindcss/viteパッケージが、CommonJS（CJS）形式のrequire()で読み込まれようとしていることが原因で発生します。

解決方法

方法1: vite.config.jsをvite.config.mjsに変更（推奨）

最も簡単で効果的な解決策は、Vite設定ファイルの拡張子を変更することです：

ファイル名の変更：
bash
```
mv vite.config.js vite.config.mjs
```

設定ファイルの内容確認：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  base: "/",
});

この解決策が効果的な理由

.mjs拡張子は明示的にESMモジュールとして扱われることを保証します
Vite 6ではESMがデフォルトのモードとなっています
TailwindCSS v4はESMのみに対応しているため、この変更が必要です

方法2: package.jsonにtypeフィールドを追加

別の方法として、package.jsonでプロジェクト全体をESMモジュールとして設定することもできます：

json

{
  "private": true,
  "type": "module",
  "scripts": {
    // 既存のスクリプト
  },
  "dependencies": {
    // 依存関係
  }
}

注意点

この方法はプロジェクト全体に影響するため、既存のCommonJSモジュールに依存している場合は問題が発生する可能性があります。

根本原因

この問題は、JavaScriptのモジュールシステムの移行に関連しています：

CommonJS（CJS）: Node.jsの伝統的なモジュールシステム（require(), module.exports）
ES Modules（ESM）: JavaScriptの標準モジュールシステム（import, export）

最近のパッケージ（TailwindCSS v4など）はESMのみをサポートする傾向があり、Vite 6もESMを優先するようになりました。

検証方法

設定が正しく動作していることを確認するには：

開発サーバーの起動：
bash
```
npm run dev
```
ビルドの確認：
bash
```
npm run build
```

トラブルシューティング

問題が解決しない場合は、以下の点を確認してください：

Node.jsのバージョンがv16以上であること
すべての依存関係が最新であること
キャッシュをクリアして再試行：
bash
```
 rm -rf node_modules/.vite && npm install
```

まとめ

Vite 6とTailwindCSS v4を一緒に使用する場合、ESMモジュールシステムの互換性を確保することが重要です。vite.config.jsをvite.config.mjsに変更するのが最も確実な解決策です。

最新のフロントエンドエコシステムではESMが標準となりつつあるため、この変更は将来の互換性を確保する上でも推奨されます。

関連記事

Vite 6でTailwindCSSのESMエラーを解決する方法 ​

問題 ​

解決方法 ​

方法1: vite.config.jsをvite.config.mjsに変更（推奨） ​

方法2: package.jsonにtypeフィールドを追加 ​

根本原因 ​

検証方法 ​

トラブルシューティング ​

まとめ ​