発端
仕事場で Vue.js を使ったアプリケーションを開発するため、環境構築を行っていた時のこと。
ドキュメントにある環境構築の手引きは、リポジトリを clone してきて、yarn でパッケージを落とし、yarn mock でモック環境が手元で走ることを確認すれば OK というもの。普通にやればミスるはずがないような環境構築で、開発担当が数名いる中、何故か自分の環境だけうまく動かない。
最初の数度は問題なく動作するのだが、何回かビルドを繰り返すと、Webpack が作った index.js で TypeError という謎の状況に。ビルドは通るのに画面が真っ白。
思わぬところでコケて混乱し、時間を浪費してしまう羽目に。
原因を探る
その後、Mac で同じように環境を作ると、同じように数度ビルドしたところで同じエラーが発生することを確認。
また、元の環境で PC の再起動をかけると、問題なく動作するようになることもわかった。しかしこれも何回かビルドしているうちにエラーが再発してしまう。
再起動で直ったところを見ると、もしかしてポートが取られているのではと思い、確認したところ…
元のアプリは 9000 番ポートで走らせる設定なので、どうやらこれが原因らしい。
コマンドプロンプトから taskkill /F /PID 1544 でプロセスをキルしてみると、無事動作するようになった。
それと同時に、コード編集に使っていた VSCode からエラーが。
拡張機能のホストが死んだ…？
不思議に思いググってみると、VSCode の GitHub にてこんな Issue を発見。
code itself is listening on port 9000 · Issue #58045 · Microsoft/vscode · GitHub
「PHP の拡張機能入れて xdebug 走らせると 9000 番ポートが埋まっててエラー起きるんだけど」「VSCode の問題じゃなくて拡張機能の問題だからそっちに問い合わせてね！」というものだが、最後のコメントに
I had similar issue, i started disabling extensions that I suspect they caused the issue, and it happened to be the
Swagger Viewerplugin. Check if u have this plugin enabled, or if there another plugin that could have caused this issue.
ここでようやく、エラーが起きたときのブラウザのタブに "Swagger Preview" と出ていたことに気付く。
VSCode の設定から Swagger Preview の設定を確認すると…
あ り ま し た 
まとめ
- Vue.js のアプリ開発で、ビルドは通るのに画面が真っ白という謎エラーが発生
- 原因は VSCode の拡張機能が使うポートとコンフリクトしていたため
- Swagger の拡張機能を使っていたのは自分だけだった
- 設定を共有する拡張機能も使っていたので Mac でも同じようにエラーが起きていた
よく考えたらタブのタイトルが大ヒントだったわけですが、あまりに予期せぬところでエラーが発生したので慌ててしまい、時間を無駄にしまくってしまいました…。
VSCode の拡張機能が使うポートが思わぬコンフリクトを起こす場合がある、という話でした。みなさんもお気をつけください…。