先に結論だけ
以下の条件を満たした場合のみ、モジュール内の即時実行コードが重複実行される問題が発生しました。
- Vite v6
-
npx viteコマンドで開発サーバーを起動する - HMR機能を利用
- 循環参照が発生している
- ファイル編集でFull Reloadをトリガー
即時実行コードを使用する場合、そのファイルをexportしてはいけません。
はじめに
この記事は、Vite v6で遭遇した問題の記録と共有のためのものです。
想定する読者
- フロントエンド開発者
- Viteを利用している
この記事はすでにViteを使ったことがある人を想定しています。ツールそのものの解説やインストールガイドなどは含まれません。
想定する環境
- Vite v6.2.1
この記事は、Vite v6での挙動について記載しています。Vite v5環境ではこの問題は発生しません。また、将来のバージョンでは挙動が変わるかもしれないので、記事を読む前にお手元の環境のバージョンを確認してください。
現象の概要
以下のような構成でViteを利用しているとします。
▼index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
▼src/main.ts
import { ModuleA } from './moduleA';
export class Main {
static width = 100;
static height = 60;
static moduleA:ModuleA;
static init() {
this.moduleA = new ModuleA();
}
}
console.log('main.ts loaded') // 読み込み時に即時実行される
Main.init();
▼src/moduleA.ts
import { Main } from './main'; // 循環参照が発生している
export class ModuleA {
size:{width:number, height:number};
constructor() {
console.log('ModuleA constructor');
this.size = {width: Main.width, height: Main.height};
}
}
▼vite.config.ts
import { defineConfig, Plugin } from 'vite';
const fullReloadAlways: Plugin = {
handleHotUpdate({ server }) {
server.ws.send({ type: "full-reload" });
return [];
},
};
export default defineConfig(() => {
return {
esbuild: {},
plugins: [
fullReloadAlways,
],
};
});
スクリプトファイルを編集した場合に、フルリロードが発生するようにvite.config.tsで設定しています。この設定は以下のIssueを参考にしました。
この構成でViteの開発サーバーを起動します。
npx vite
ブラウザでページを開くと、コンソールに以下のようなログが出力されます。ここまでは問題ありません。
main.ts loaded
ModuleA constructor
しかし、ファイルを編集しHMRをトリガーすると、以下のようなログが出力されます。
main.ts loaded
main.ts loaded
ModuleA constructor
ModuleA constructor
このように、即時実行コードが重複実行されます。この問題はbuildコマンドを実行した場合には発生しません。
npx vite build
原因
この問題は、ViteのHMR機能と循環参照が組み合わさった際に発生します。
ViteのHot Module Replacement (HMR) は、開発サーバーから更新されたファイルの差分のみをブラウザに転送する仕組みです。HMRが有効な場合、モジュールの読み込み順序がbuildと変わることがあります。
即時実行コードを含むファイルを外部からimportした場合、読み込み順によっては関数が重複実行されることがあります。
対策
エントリーポイントを専用のファイルにする
この問題を回避するには、即時実行コードを含むファイルからはモジュールをエクスポートせず、エントリーポイントとして専用のファイルを使用します。
▼index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/entry.ts"></script> <!-- ここを変更 -->
</body>
</html>
▼src/entry.ts
// 即時実行コードを記述する専用のファイルを作成する。このファイルはexportしない。
import { Main } from './main';
Main.init();
▼src/main.ts
import { ModuleA } from './moduleA';
export class Main {
static width = 100;
static height = 60;
static moduleA:ModuleA;
static init() {
this.moduleA = new ModuleA();
}
}
// ここでは処理しない
循環参照を避ける
循環参照はコードの動作を読み解きにくくするだけではなく、再現が難しい問題を引き起こします。しかし循環参照を人力で発見することは簡単ではありません。各種ツールの手助けを受けましょう。
Viteはvite --debug hmrというオプションでHMRのデバッグ情報を表示できます。循環参照が発生してViteがフルリロードを実行した場合、コンソールにその旨のメッセージが表示されます。
また、eslint-plugin-importのno-cycleルールを利用することで、循環参照を検出できます。
以上、ありがとうございました。