どうもこじらです。
Vue3→Vue2への個人開発アプリの移行も大詰めになりました。
今ではTypeScriptにもComposition APIにも慣れてきて、バージョンアップの恩恵を受けまくっています。
今思うとOptions APIは構造が歪でしたねｗ
Composition APIで確実に良くなって整理されてるので書いていて楽しいです。
まぁそれは置いておいて、Herokuにアプリをリリースしようとしたときに発生したエラー原因が意外なもので、辿りつくのに無駄な時間を費やしてしまったので事象と原因を共有しておきます。
環境
まずはお決まりの環境。
- node: 20.12.2
- npm: 10.5.0
- vue: 3.4.21
- nuxt: 3.9.3
- vuetify: 3.5.9
エラー内容
Herokuデプロイ時に発生したエラーです。
nuxt build実行中です。
ERROR [vite:load-fallback] Could not load /tmp/build_5215a7f2/components/interface/fRTask (imported by pages/search/result/fRTaskResult.vue?vue&type=script&setup=true&lang.ts): ENOENT: no such file or directory, open '/tmp/build_5215a7f2/components/interface/fRTask' ERROR Nuxt Build Error: Could not load /tmp/build_5215a7f2/components/interface/fRTask (imported by pages/search/fRTask.vue?vue&type=script&setup=true&lang.ts): ENOENT: no such file or directory, open '/tmp/build_5215a7f2/components/interface/fRTask'
※vueファイル(/pages/search/fRTask.vue)がtsファイル(/components/interface/fRTask.ts)を参照していて、そこでエラーが発生しています。
tmp配下のファイルが見当たらない…？
Nuxtが内包しているNitroの仕様で実行されている処理内でエラーが起こっているものと思われますが、ブラックボックスになっているので詳細が分かりません。
疑ったこと
最初に疑ったのは、TypeScriptのトランスパイル後のファイルかNuxtの中間ファイルか知りませんが、ビルド時に使用するディレクトリの指定が間違っているのかなと思いました。
しかし、Nuxtの手順を読んでもNitroの手順を読んでも内容はシンプルなもので、ビルド用のディレクトリを指定する手順はありません。
うーん。じゃあビルド用のディレクトリは間違ってないと思った方が良いのかなぁ……。
色々試しましたが、nuxt.config.tsのviteの設定をいじって試してみても何も変わりませんし、ただただ時間だけが過ぎていきました。
埒が明かないので「このvueファイルを削除した場合、デプロイは成功するのか？」を試すことにしました。
そしたらまさかのビルド成功。
別の似たvueファイルのところでエラーになるのかと思ってましたが。
問題があるのはこのファイルであることが確定しました。
原因
原因はファイル名でした。
fRTask.tsというファイル名が良くなかったみたいです。
個人的には「え、そんなことある？」といった感じでしたが、frTask.tsに変更して再度デプロイしたら成功したので間違いないです。
TypeScriptでは、キャメルケースでファイル名をつけることを推奨しています。
しかし、実際にNitroの仕様かは知りませんが、キャメルケースは強制だと思った方がいいかもしれません。
この段階でファイル名変えなきゃいけないのかぁ…。
eslintとかでエラー吐いてくれてもいいんだけどなぁ。（甘え）
まぁTypeScript自体の仕様じゃないならしょうがないのかなぁ…。
とりあえず、fRTaskみたいな、大文字が連続する書き方はNGらしいです。
たしかに命名きもいですもんね。
こじらでした
じゃ
