Vueで絶賛サービスを開発中ですが、こんなエラーで引っかかりました。
[Vue warn]: Unknown custom element:TagName - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> at src/components/Page1/Main.vue at src/App.vue
今回はこちらのエラーを解決するために確認したことを順を追って解説していきたいと思います。
実装を行おうとした構成について
よくあるページ構成なのですが、ヘッダーとサイドバーに同一のコンポーネントを使い、中身を差し替えてページ遷移を行うといったものを作ります。
ヘッダーとサイドバーを固めた1つのコンポーネントとしてその中に<slot>を使い中身を差し替えます。
エラーの詳細
エラーの挙動
/pageAを表示したあと、/pageBを表示しようとすると、高頻度で/pageBが表示されず、上記エラーコードが出ます。
不思議なことに
npm run dev
でビルドを行った直後は稀に/pageBが表示されました（ホントなんでや…？）
なお、pageBを表示時にページを更新すると100%でエラーが出ます。
エラーの内容
とりあえずGoogle翻訳でエラーを確認しました（英語苦手）
[Vue警告]：不明なカスタム要素： <TagName>- コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合、「名前」オプションを必ず指定してください。
本当に最近の翻訳は優秀で大抵の英語のドキュメントはワンクリックで内容を理解できるようになります。
再帰的なコンポーネントを作った覚えがないのですが、「nameオプションを付けろ」と言われています。
それを念頭において次の章でチェックをしていきます。
チェックしたポイント
Vueコンポーネントでnameが定義されているか
まず最初にエラーログで指摘された「nameを定義しているか」を確認します。
export default {
name: 'PageA', // ← これが記入されているか
components: {
Wrapper
},
data () {
return {
}
},
}コンポーネントの参照でループが出来ていないか
私はこれでした。
コンポーネントはタグとしてtemplate内に記入する前にimportされた時点で内部処理が走ります。
たまたまこの実装を行う前のコンポーネントをimportに設定したまま、実装したコンポーネントをimportをしていたせいでimportしたPageBのコンポーネントでPageAのコンポーネントを呼び出し、それがPageBの…というループが出来てしまい、エラーとなっていました。
IDEの設定によってはimportが自動的に隠されることがあるので、挙動がおかしい場合は確認してみてください。
必要以上のコンポーネントをimportしていないか
コンポーネント参照のループの防止策になるのですが、必要以上のコンポーネントがimportされていないかを確認することは有力です。
根本的な原因解決にはなっていないのですが、無駄な情報を管理させることは不具合の原因になりがちです。
C#のusingやPHPのuseのようにimportしても使わなければOKというわけではないのでご注意ください。
Componentsが正しく登録されているか
地味に登録を忘れていることもあります。
本来以下のように書くべき部分を components: [‘AnswerComponent’] と書いてエラーになることがありました。
export default {
components: {
'answer-component': AnswerComponent
},
}まとめ
今回はVue.jsでコンポーネントが表示されないエラーについて纏めました。
ポイントとしては
- Vueコンポーネントでnameが定義されているか
- コンポーネントの参照でループが出来ていないか
- 必要以上のコンポーネントをimportしていないか
の3つを確認すれば解決に繋がるかもしれません。
ここまで読んで頂きありがとうございました。
コメント