Obscure error says my component name begins with a

Question

I am getting an obscure error that my component name is zero. But none of my components have a zero for a name. This error is hard to track down. Anyone know what the problem could be so I can move in the right direction to tackle it.

vendor.js:66537 [Vue warn]: Invalid component name: "0". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

Heres more information on the error:

Edit: More information:

I have a unique project structure. I have single file components. And each component is split into 2 files like so:

Home.vue:

<template>
    ...
</template>

<style lang="scss">
    ...
</style>

<script src="./home.js"></script>

home.js:

export default {
    ...
}

Edit: debug capture

Edit: home.js

import RecentPostsWidget from './widgets/RecentPosts'
import PagesWidget from './widgets/Pages'

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

Answer 1

Can you try adding a name to the component?

home.js

import RecentPostsWidget from './widgets/RecentPosts'
import PagesWidget from './widgets/Pages'

export default {
    name: 'p-components-home',
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

Answer 2

You need to add .vue at the end of imports of the components

import RecentPostsWidget from './widgets/RecentPosts.vue'
import PagesWidget from './widgets/Pages.vue'

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

Answer 3

I had the same error and it was caused by use of array instead of object in the components. This is how it should looks like

components: {
  RecentPostsWidget,
  PagesWidget
}

This is how I had it when the error appeared:

components: [
  RecentPostsWidget,
  PagesWidget
]

Answer 4

Try replacing

components: {
    RecentPostsWidget,
    PagesWidget
}

with

components: {
    recentPostsWidget: RecentPostsWidget,
    pagesWidget: PagesWidget
}