Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

did you register the component correctly? For recursive components, make sure to provide the "name" option

Error traceback：

[Vue warn]: Unknown custom element: <i-tab-pane> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <DataCenter> at src/views/dc/data-center.vue
       <Index> at src/views/index.vue
         <App> at src/app.vue
                in my case, I had misspelled components as component, note the missing s, it needs to be plural.
– Mr. Alien
                May 4, 2020 at 20:26
                OMG...please please check the spelling, it should be components as mentioned by @Mr.Alien. I banged my head over this error.
– Saurabh Talreja
                May 11, 2021 at 9:14
                in my case im not misspelled , not solve until now. when i click save on my code ( vscode ) that listen by npm run start ( vue.js ) its show my table . but without that , i get the error
– Yogi Arif Widodo
                Mar 13 at 9:57
If you're using a component within a component (e.g. something like this in the Vue DOM):
  MyComponent
   ADifferentComponent
     MyComponent
Here the issue is that MyComponent is both the parent and child of itself. This throws Vue into a loop, with each component depending on the other.
There's a few solutions to this:
 1. Globally register MyComponent
vue.component("MyComponent", MyComponent)
2. Using beforeCreate
beforeCreate: function () {
  this.$options.components.MyComponent = require('./MyComponent.vue').default
3. Move the import into a lambda function within the components object
components: {
  MyComponent: () => import('./MyComponent.vue')
My preference is the third option, it's the simplest tweak and fixes the issue in my case.
More info: Vue.js Official Docs — Handling Edge Cases: Circular References Between Components
Note: if you choose method's 2 or 3, in my instance I had to use this method in both the parent and child components to stop this issue arising.
                Excellent.  Only place online with the right answer, I wonder why the docs don't explain it better.
– Dirigible
                Apr 28, 2020 at 12:59
                For methods 2 and 3, is there a way to set the name of the component as you can in method 1? For example, if you wanted component TreeFolderContents to be "tree-foldercontents" rather than "tree-folder-contents". Or is this taken from the "name" prop in the component?
– Zakalwe
                Jul 6, 2020 at 11:08
You also need to have same name while you export: (Check to name in your Tabpane component)
name: 'Tabpane'
From the error, what I can say is you have not defined the name in your component Tabpane. Make sure to verify the name and it should work fine with no error.
                But the Tabpane is the component of iView, do you mean I should contribute to the iView?
– user7693832
                Mar 7, 2018 at 14:57
                Why don't you just show where the name parameter goes instead of having it just floating around? That's why this is confusing to people.
– sheriffderek
                Nov 16, 2018 at 18:09
Wasted almost one hour, didn't find a solution, so I wanted to contribute =)
In my case, I was importing WRONGLY the component.. like below:
import { MyComponent } from './components/MyComponent'
But the CORRECT is (without curly braces):
import MyComponent from './components/MyComponent'
                I also spent WAY too long on this... I think it was importing as an object because I used some syntax shortcuts in vs code.
– austriker
                May 12, 2020 at 17:21
                @Ali, if you use brackets {}, you are trying to destructure an imported object. See this example: stackoverflow.com/questions/33524696/…. In Vue.js modules, you want to import the whole object, not a single attribute of it
– Marco Arruda
                Sep 15, 2020 at 18:13
One of the mistakes is setting components as array instead of object!
This is wrong:
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: [
    ChildComponent
  props: {
</script>
This is correct:
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  props: {
</script>
Note: for components that use other ("child") components, you must also specify a components field!
For recursive components that are not registered globally, it is essential to use not 'any name', but the EXACTLY same name as your component.
Let me give an example: 
<template>
    <li>{{tag.name}}
        <ul v-if="tag.sub_tags && tag.sub_tags.length">
            <app-tag v-for="subTag in tag.sub_tags" v-bind:tag="subTag" v-bind:key="subTag.name"></app-tag>
</template>
<script>
    export default {
        name: "app-tag",  // using EXACTLY this name is essential
        components: {
        props: ['tag'],
I had this error as well. I triple checked that names were correct.
However I got this error simply because I was not terminating the script tag.
<template>
    <p>My Form</p>
    <PageA></PageA>        
</template>
<script>
import PageA from "./PageA.vue"
export default {
  name: "MyForm",
  components: {
    PageA
Notice there is no </script> at the end.
So be sure to double check this.
If you have path to the component (which causes a cycle) to index.js, cycle will be begin. If you set path directly to component, cycle will be not. For example:
// WRONG:
import { BaseTable } from @/components/Base'; // link to index.js
// SUCCESS:
import BaseTable from @/components/Base/Table.vue';
I had this error and discovered the issue was because the name of the component was identical to the name of a prop. 
import Control from '@/Control.vue';
export default {
    name: 'Question',
    components: {
        Control
    props: ['Control', 'source'],
I was using file components. I changed the Control.vue to InputControl.vue and this warning disappeared.
This is very common error that we face while starting any Project Vue. I spent lot of time to search this error and finally found a Solution.
Suppose i have component that is "table.vue",
i.e components/table.vue
In app.js
Vue.component('mytablecomp', require('./components/table.vue').default);
So in in your index.blade file call component as 
<mytablecomp></mytablecomp>
Just you need to keep in mind that your component name is in small not in large or camel case. 
Then my above code will surely work for you.
Thanks
We've struggled with this error twice now in our project with different components. Adding name: "MyComponent" (as instructed by the error message) to our imported component did not help. We were pretty sure our casing was correct, as we used what is in the documentation, which worked fine for the other 99% of our components.
This is what finally worked for us, just for those two problematic components:
Instead of this (which, again, works for most of our components):
import MyComponent from '@/components/MyComponent';
export default {
  components: {
    MyComponent
We changed it to ONLY this:
export default {
  components: {
    MyComponent: () => import('@/components/MyComponent')
I can't find the documentation we originally found for this solution, so if anyone has any references, feel free to comment.
                This worked for me, pretty easy solution, not sure why this is not up voted more. Thanks @Lys777
– Janpan
                Nov 7, 2022 at 11:57
If you are using Vue Class Component, to register a component "ComponentToRegister" you can do
import Vue from 'vue'
import Component from 'vue-class-component'
import ComponentToRegister from '@/components/ComponentToRegister.vue'
@Component({
  components: {
    ComponentToRegister
export default class HelloWorld extends Vue {}
Adding my scenario. Just in case someone has similar problem and not able to identify ACTUAL issue.
I was using vue splitpanes.
Previously it required only "Splitpanes", in latest version, they made another "Pane" component (as children of splitpanes).
Now thing is, if you don't register "Pane" component in latest version of splitpanes, it was showing error for "Splitpanes". as below.
[Vue warn]: Unknown custom element: <splitpanes> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
/* /components/index.js */
import List from './list.vue';
import ListItem from './list-item.vue';
export {List, ListItem}
and if you use ListItem component inside of List component it will show this error as it is not correctly imported. Make sure that all dependency components are imported first in order.
In my case (quasar and command quasar dev for testing), I just forgot to restart dev Quasar command.
It seemed to me that components was automatically loaded when any change was done. But in this case, I reused component in another page and I got this message.
i ran into this problem and below is a different solution. I were export my components as
export default {
    MyComponent1,
    MyComponent2
and I imported like this:
import { MyComponent1, MyComponent2} from '@/index'
export default {
  name: 'App',
  components: {
    MyComponent1,
    MyComponent2
And it gave this error.
The solution is:
Just use export { ... } don't use export default
In my case, i was calling twice the import...
@click="$router.push({ path: 'searcherresult' })"
import SearcherResult from "../views/SearcherResult"; --- ERROR
Cause i call in other component...
The error usually arises when we have used the Component (lets say VText) but it has not been registered in the components declaration of the Parent Component(lets say Component B).
The error is more likely to occur when using components in a recursive manner. For example using tag=VText in an  tag, as importing the component in a such case will result in error from Eslint as the component is not directly being used in the template. While not importing the component will cause an error in the console saying the component has not been registered.
In this case, it is a better approach to suppress the ESLinter on registration line of the Component(VText in this case). This suppression is done through writing // eslint-disable-next-line vue/no-unused-components
Example code is below
    <template>
        <i18n path="AssetDict.Companies" tag="VText">
          <template>
            <span class="bold-500">Hi This is a text</span>
          </template>
        </i18n>
    </template>
    <script>
    import { VButton, VIcon, VTooltip, VText } from 'ui/atoms'
    export default {
      name: 'ComponentB',
      components: {
        VButton,
        VIcon,
        CompaniesModifyColumn,
        VTooltip,
        // eslint-disable-next-line vue/no-unused-components
        VText,
</script>
I just encountered this. Easy solution when you know what to look for.
The child component was the default export in it's file, and I was importing using:
import { child } from './filename.vue'
instead of
import child from './filename.vue'.
I encounter same error msg while using webpack to async load vue component.
function loadVMap() {
  return import(/* webpackChunkName: "v-map" */ './components/map.vue')
  .then(({ default: C }) => {
      Vue.component('ol-map',C);
     return C;
    .catch((error) => 'An error occurred while loading the map.vue: '+error);
I found that the then function never executed.
so I reg this component out of webpack import
import Map from './components/map.vue' 
Vue.component('ol-map',Map);
Then I could gain the detailed error msg which said I used a var which is not imported yet.
The question has been answered very well by @fredrivett here, but I wanted to add some context for other encountering the Circular Reference error when dealing with variables in general.
This error happens with any exported object not just components.
Exporting a variable from parent and importing it in a nested child:
🌐 EXAMPLE
<script>
// parent
export const FOO = 'foo';
</script>
❌ WRONG
<script>
// child
import { FOO } from 'path/to/parent'
export default {
  data() {
    return {
</script>
✅ CORRECT
<script>
// child
export default {
  data() {
    return {
      FOO: require('path/to/parent').FOO
</script>
Note: in case you are dealing with objects you might want to create a global state which might serve you better.
I'm curious to know if this approach makes sense or it's an anti pattern.
export default {
  components: {completeProfile} // You need to put the component in brackets
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.