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

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.

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.

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'