[vue.js] did you register the component correctly? For recursive components, make sure to provide the "name" option

I configured 'i-tab-pane': Tabpane but report error,the code is bellow:

<template>
  <div class="page-common">
    <i-tabs>
      <i-tab-pane label="wx">
        content
      </i-tab-pane>
    </i-tabs>
  </div>
</template>

<script>

  import {
    Tabs,
    Tabpane
  } from 'iview'

  export default{
    name:"data-center",
    data(){
      return {msg: 'hello vue'}
    },
    components: {
      'i-tabs' : Tabs,
      'i-tab-pane': Tabpane
    }
  }
</script>

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

I have tried in the main.js to global configuration:

Vue.component("Tabpane", Tabpane);

but still do not work. How to resolve this issue?

In my case it was the order of importing in index.js

/* /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.

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>
        </ul>
    </li>
</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>
  <div>
    <p>My Form</p>
    <PageA></PageA>        
  </div>
</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.

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

The high votes answer is right. You can checkout that you have applied different name for the components. But if the question is still not resolved, you can make sure that you have register the component only once.

components: {_x000D_
    IMContainer,_x000D_
    RightPanel_x000D_
},_x000D_
methods: {},_x000D_
components: {_x000D_
    IMContainer,_x000D_
    RightPanel_x000D_
}_x000D_
  

we always forget that we have register the component before

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!

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'

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.

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

Make sure that the following are taken care of:

1. Your import statement & its path

2. The tag name of your component you specified in the components {....} block

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.

For those looking for an answer and the others haven't worked, this might:

If you're using a component within a component (e.g. something like this in the Vue DOM):

App
  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.

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 WRONG:

import {
    Tabs,
    Tabpane
  } from 'iview'

This is CORRECT:

import Iview from "iview";
const { Tabs, Tabpane} = Iview;

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...