Unknown custom element, did you register the component correctly

Hi all,

I’ve run into a really weird problem. I’ve got 2 circular components which represent a graph, it’s super simple.

I literally just did 3 things after using vue create command

First thing I do is change App.vue to

<template>
  <div id="app">
    <foo></foo>
  </div>
</template>

<script>
import foo from './components/foo'
export default {
	components: {
		foo
	}
}
</script>

then I add 2 components, foo, and bar

foo is just

<template>
	<div class="foo">
		foo:
		<bar></bar>
	</div>
</template>

<script>
import bar from './bar'
export default {
	name: 'foo',
	components: {
		bar
	}
}
</script>

and bar is just

<template>
	<div class="bar">
		<div @click="show = !show"> show foo </div>
		<foo v-if="show"></foo>
	</div>
</template>

<script>
import foo from './foo'
export default {
	name: 'bar',
	data(){
		return {
			show: false
		}
	},
	components: {
		foo
	}
}
</script>

<style scoped>
.bar {
	padding-left: 5px
}
</style>

That’s all, then run npm run serve

you can clone this repo at: https://github.com/lopugit/dingern/tree/vue-forum-debug-1

I can’t make a code-sandbox because they don’t support some cli dependancies.

I can’t figure out what’s going wrong??

I’ve got name set in both components?? foo works in App.vue, bar, works in foo.vue, but from then, for some reason it doesn’t work???

Full error:

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

found in

---> <Bar> at src/components/bar.vue
       <Foo> at src/components/foo.vue
         <App> at src/App.vue
           <Root>

fml finally fixed it:

async importing…

<script>
export default {
	name: 'foo',
	components: {
		bar: () => import('./bar')
	}
}
</script>
1 Like

Doesn’t work. Gives me an overflow error. The only way to solve the recursion problem is the use a v-if on the recursive component and only turn it on when something happens within the component other than loading the parent.