Vue3のビルド時にCannot find module 'fork-ts-checker-webpack-plugin-v5'というエラーがでて苦しんだ

Vue3で作ったアプリケーションをCircleCIでビルドしようとした際に起きたエラーへの対応方法を記す。 対応があまりにもお粗末なので、その内容も備忘録として記す。

Vue3 + TypeScriptで作成したアプリケーションをデプロイするワークフローをCircleCIを用いて作成中。 デプロイ自体はCDK（S3へのアップ・CloudFrontでの配信）で行うが、その前にビルドする必要があるので、CircleCIで用意したコンテナ内でビルドする必要があった。 しかし、ビルド時に Cannot find module 'fork-ts-checker-webpack-plugin-v5'というエラーが出て、ビルドで成功しない状態が続いた。ローカルでは正常に動いていたのにだ。

CircleCIのDockerイメージはなんとなく、circleci/python:3.7.2-nodeを使っていたのが問題。 これではnodeは10系なので、それが原因でnpm run buildが失敗していた。 イメージをcircleci/python:3.9.0b5-nodeに変更したところ無事に成功

ローカルとコンテナの差はなんだろうと考えていたが、nodeのバージョンの違いに気づくまでに小一時間かかり、macOSとLinuxの違いなのだと思い込みひたすら、package.jsonをいじっていた。

パッケージの依存関係でインストールされた、見に覚えのないパッケージにより振り回された。 パット見はnpm周りの問題に見えるのも、解決をおくらせた原因。実行環境の違いに気がつくまで時間がかかってしまった。