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?

Since you have applied different name for the components:

components: {
      'i-tabs' : Tabs,
      'i-tab-pane': Tabpane
    }

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.

Hi, I use *.vue components, and I have following error: "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." for my component. However I provided names for all components. Here is sample fiddle to reproduce this error:

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'

You've created this amazing Vue component, and you're trying to use it within another component. Then you get this terrible error: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. Don't worry, I'll show you exactly how to fix this.

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.TreeFolderContents = require('./tree-folder-contents.vue').default
}
3. Move the import into a lambda function within the components object
components: {
  TreeFolderContents: () => import('./tree-folder-contents.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.

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. I have a Sidebar that contains a TreeList that contains TreeNodes that each contain a TreeList. I have read plenty about other people having problems with this.

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'],
    }

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option. Here is my app so far, pretty simple an basic. main.js

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>

When I use my Loader component in some view, I get the following warning. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. I provided the name in the component and it didn't make any difference. I'm using the loader-component in the login-view.

@CodeDemon for sure. You can make it shorter if you will use ES6, like so components: {myTask}, Or if its some small component, you can create it inside components property. But it seems like not good way, because of app scale. – GONG Sep 8 '16 at 4:20

Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Try to use input componennt in contact section (see simple example below). But fet an error:[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the name option. Напишите нам

Comments
  • in my case, I had misspelled components as component, note the missing s, it needs to be plural.
  • i misspelled components as componets
  • How to defined the name in my component Tabpane?
  • the Tabpane is the component of iView.
  • Like you have defined the component name in your post: name:"data-center",
  • So what... you should also consider giving a name for that component.
  • But the Tabpane is the component of iView, do you mean I should contribute to the iView?
  • import { } from "module"; why this statement is not correct?
  • 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.
  • Yes fredrivett your solution works for me. Thank you!
  • Happy to help @SuhasBhosale
  • The dynamic import works like a charm, when you want to do recursive components.
  • Excellent. Only place online with the right answer, I wonder why the docs don't explain it better.
  • I ran into this issue. This is not intuitive.