概要
Vuetify3 を公式サイトの手順に従って Nuxt3 環境に導入すると、奇妙な現象に襲われました。
状況としては、<v-app> や <v-main> などのレイアウトを構成するタグは正常に働き画面も表示されるのですが、<v-btn> や <v-chip> といったコンポーネントを記述した瞬間、500エラーが発生します。
エラーの詳細は以下のとおりです。
500 Cannot use 'in' operator to search for 'path' in undefinedまた、ブラウザのコンソール上には、以下の Warning と Error が出ています。
[Vue warn]: Unhandled error during execution of setup function
at <VBtn>
at <Sample onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouteProvider .....[nuxt] error caught during app initialization TypeError: Cannot use 'in' operator to search for 'path' in undefined
at Object.resolve .....原因と解決方法
Nuxt が、バージョン 3.2.3 と古めのものを使用しており、そこに最新の Vuetify 3.6.10 を組み合わせていたことが原因でした。
Vuetify のバージョンを 3.4 に下げると、問題は解消しました。
npm i -D vuetify@3.4.*
