Nuxt.jsがローカルでのビルドは通るのにCIでのビルドがコケる（There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.）😱

結論から書くと、ものすごく単純な話なんですが、大文字小文字はしっかり区別しようという話です。



Nuxt.jsで作ったプロジェクトがローカルだとビルドが通るのに、CIだとコケていて「なんでだろう」と思いログを確認してみました。

[fatal] Nuxt build error
ERROR in ./components/templates/Template.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/vue-loader/lib??vue-loader-options!./components/templates/Template.vue?vue&type=script&lang=ts&)
Module not found: Error: Can't resolve '~/components/atoms/btnRect.vue' in 'components/templates'

btnRect.vueが見つからないというエラーでコケていたのですが、試しにローカルでビルドしなおしてみるとビルドは通ります。

が。よくよくターミナルを確認してみると、

WARNING in ./components/atoms/BtnRect.vue?vue&type=script&lang=ts&
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

と、しっかりWARNINGが出てました。
そう。BtnRect.vueをbtnRect.vueと書いていることが原因なのです。

なので、

import btnRect from '~/components/atoms/btnRect.vue';

を

import BtnRect from '~/components/atoms/BtnRect.vue';

に修正することで無事にビルドできるようになりました。WARNINGを無視すべからずという教訓を得たできごとでした。