1.エラー内容
Chromeのデベロッパーツールに以下のエラーが表示されるようになった。
Unknown custom element: <コンポーネント名> - did you register the component correctly? For recursive components
2.原因
webpack-dev-serverをインストールしておらず、webpack.mix.jsに「.version()」と記載しているにも関わらず、ハッシュ値が更新されなかったため。
(ちなみにハッシュ値はpublic/mix-manifest.jsonファイルで確認できます。)
3.解決方法
まず、package.jsonの「"devDependencies"」にwebpack-dev-serverがあるか確認してください。
記載されていない場合はインストールできていないので以下のコマンドをpackage.jsonがあるディレクトリで実行してください。
コマンド
$ npm install -D webpack-dev-server
$ npm run dev
コマンド実行後、もし「Cannot read properties of undefined (reading 'component')」エラーが表示されるようでしたら以下を記載してください
app.js
import Vue from 'vue';
4.まとめ
これで自分の環境では動きました。
チーム内で何人か同じエラーが発生していましたが、なかなか解決しなかったのでとりあえず解決方法が分かってよかったです笑
でも他の方は今まで問題なく開発できていたのが不思議。