Cannot use namespace 'Vue' as a type. と出てフロントのビルドが失敗した

突然開発環境が立ち上がらなくなった

開発しているプロダクトのブランチで最新のコミットを取ってきたらなぜかローカルで開発環境が立ち上がらなくなる事態に直面した。 標準出力を眺めてみると、いくつかのサービスのうちの一つでエラーを吐いて停止しており、それがフロントエンド関連のものだとわかった。

18:27:52 product_frontend.1     | ../product/src/something/components/SomeComponent.ts(25,44): error TS2709: Cannot use namespace 'Vue' as a type.
18:27:52 product_frontend.1     | ../product/src/something/components/SomeComponent.ts(43,49): error TS2339: Property 'extend' does not exist on type 'typeof import("/Users/killinsun/node_modules/vue/dist/vue")'.

具体的にどのコミットが影響してこのエラーが発生したのかはまでは突き止めたが、原因となっているのは自分の環境依存なところだった。

原因

上記エラーログを見てすぐ気づいた人もいると思うが、 import している先がプロジェクト直下のディレクトリではなく、ホームディレクトリ直下にある node_modules を見にいっていた。

このホームディレクトリに node_modules とその後にわかったpackage.json は意図して設置したものではなかったのだが、なぜかこっちを優先して見に行っていたがためにエラーが発生したようだった。 本来ならば

core モジュール => 絶対パス or 相対パス => ./node_modules => ../node_modules => ../../node_modules

という感じでみにいっていた気がする

これらは何らかの手違いで設置してしまったものであり、普段使っているフォルダ、ファイルではないため、削除したところ正常に動作するようになった。

しかし、本来の優先順位を超えてホームディレクトリにある node_modules フォルダを見に行った理由は謎で、このエラーを引き起こした原因のコミットを見ても関連性が掴めない。

該当コミットの内容は、記載できるレベルで大まかに説明すると「とあるフロントエンドコンポーネントを直接 import するのではなく、コンポーネントの ID を export するようにし、それらを import するように変更」といった感じのものだった。

自分が担当しているサービスの内容ではなかったのと、この事象が自分にしか発生していないものだったため、コミットの差分を見た以上の調査はしなかった。

また似たような事があったらもう少し調査してみるが、多分レア事象だと思うので深追いはしない。

/以上