Vitest2.1.8がVite6を対応していなかったお話

それには突然出くわした

以前はよく使っていた MSW ですが、Next.js の App Router や RSC の安定化、それに伴う MSW の 2.0 に伴い使っていた知識が古くなってきたので、
最新の環境を作り、動作するための方法などをキャッチアップしようと思い、テストプロダクトを Vite + Vitest で組んだ時にそれが発生しました。

Why ？
Vite で React プロダクトを作成し、Vitest を npm で追加で導入し、Vitest の設定ファイルのドキュメントを参照しただけで発生しました。
https://vitest.dev/guide/#configuring-vitest

これが長い道のり(2 日ぐらい)のエラー解消に向けた格闘の始まりでした。

とりあえず対処

https://vitest.dev/guide/#configuring-vitest

Vitest のドキュメント通りに設定を行った上でのエラーであったため、原因については見当もつきませんでした。
何故なら筆者が設定をした上でのエラーでは、それが明白に筆者の設定がまずい部分があったと心当たりがあるからです。
今回はそれがなく、作りたての環境で発生がしたため、まずは手当たり次第思いつく事を試してみました。

1.1 Vite のトリプルスラッシュを変えてみる

Vitest の公式ドキュメントに、トリプルスラッシュを使う ver2.1 までの別設定があります。

/// <reference types="vitest/config" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {}, ///Error
});

1.2 Vite のバージョンを下げる

Vite と Vitest のバージョンの組み合わせが悪い可能性があると考えました。
作成したてのプロダクトのバージョンは以下の通りでした。

"vite": "^6.0.1",
"vitest": "^2.1.8"

Vite のバージョンを 5.0.0 まで落としましたが、これでも解決はしませんでした。

1.3 プロダクトを作り直す

バージョンを落としてもダメだったので、プロダクトを作り直してみました。
が、これでも解決はしませんでした。

---

どうにもならなかった

思いつく手段をすべて試してみましたが、解決はできなかったので AI に頼ってみました。

AI からは Vitest ドキュメント以上の情報は出てきませんでした。
AI の性質上、ネットで情報が多く出てくるのを参照することが多いので、公式ドキュメント以上に情報がないので情報が AI は知らない可能性が出てきました。

次に、SNS で現状を投稿し、エンジニアの先輩達に助けを乞うことにしました。
自力で解決したいですが、手段と方法をやり尽くしたので堂々巡りになる前にヘルプを出すことにしました。

(4 時間ぐらい試行錯誤をして嘆いた筆者の図)

そこから、エンジニアの先輩達に見てもらうために Github リポジトリ経由で見てもらう事で、共に原因を探っていきました。

Issue を見る

Github Issue に 1 年前にも同じ事象が発生した人がおり、Issue 上で解決方法をいろんなエンジニアが提案していることを教えて頂きました。
https://github.com/vitest-dev/vitest/issues/4048

その中で、vite のdefineConfigを Vitest に置き換え、更に追加で型定義をインポートしキャストを行って回避する方法がありました。
https://github.com/vitest-dev/vitest/issues/4048#issuecomment-1855141674

更にですが、その提案の下で、pnpm dedupeを行うことを推奨するエンジニアの方がおり、キャストで型定義を無理やり上書きするよりかは試してみることにしました。
この試みは一部成功し、一部では失敗しました。

Vite 5.4.11 では成功、Vite6 では失敗

Vite@6 の環境で行った場合には、npm dedupeを行ってもエラーは解決できませんでした。
しかし、Vite 5.4.11 の環境で行うとエラーが解決しました。
Vite@6 はつい最近行われたメジャーバージョンアップデートです。
Vite と Vitest の組み合わせが悪くなったとしたら、そこしかないと考え、Vite と Vitest の Github で Issue や PR、ChangeLog などの情報を見てみました。

Vitest が Vite6 をサポートしていない

https://github.com/vitest-dev/vitest/releases/tag/v3.0.0-beta.1
現在行われている Vitest@3 の開発のベータ版リリースログの中に答えが書かれていました。
Vitest 3 is the first version that supports Vite 6 (excluding 2.1.6)
「Vitest3 が Vite6 を一番最初にサポートするバージョンである。」
つまり、Vitest@2.1.8までは Vite@6 をサポートしてない。
なので公式ドキュメント通りに設定を行っても、Vite@6 とVitest@2.1.8ではサポートバージョンではないので型エラーが発生するのです。

対応法

Vitest@3 が 1 月に安定版をリリースする予定なので、1 月まではVite@5.4.11を利用しましょう。
ちなみにですが、エラーは出ますが動くことには動きます。

なので、Vitest も完全に対応していないわけではなく、一部は動作がするという環境なのだと思います。
エラーがでて動くのは良くない事だと思うのですが、動いちゃうのが JavaScript クォリティ…（頭抱える図

もしくは、vite.config とは別に vitest.config を作成し、両方の設定ファイルをマージするというやり方もできます。
ただ、Vitest がまだ対応していないと言っているので、あまりおすすめできるやり方ではないかもしれません。

今回学んだ事

対応宣言していても最新バージョンではエラーが出ることがある

最新バージョンの場合、ライブラリが対応していると公式サイトで書いていてもサポートしていない可能性がある。
Vitest requires Vite >=v5.0.0 and Node >=v18.0.0
Vitest のサイトには上記の記述があり、5.0 以上なら無条件で対応していると認識していました。
ところが、実際にはリリースログの中ではVitest 3 is the first version that supports Vite 6 (excluding 2.1.6)とあるため、Vite@6 は対応していませんでした。
そのため、公式の記述であってもメジャーバージョンアップデートが行われた際には信用するのではなく、対応していないことを確認する必要があると学びました。

Help を出すこと

AI に聞いたりドキュメントを見たりしましたが、一人の力ではたどり着けず SNS のエンジニアの皆様に助けていただきました。
特に環境周りは一人でやっても詰まる事が多く、難しい部分ではあるので早急に助けを求めた事が解決の糸口になりました。
後は、同じ環境を作っていただき同じエラーが発生するかを見ていただく事で、おま環である可能性を早期に潰す事ができました。

対象ライブラリの Issue などを探る

公式サイトのドキュメントの情報だけを見るのではなく、PR や Issue、チェンジログを早期に確認するの重要性を学びました。
特に、最新の対応情報は Issue や PR、チェンジログにしか載っていない場合があるためと今回の Vitest で学んだからです。

更新箇所

2024/12/18 : Vite@5.4.18と存在しないバージョンを記載していた部分を、Vite@5.4.11に変更