nuxt: Cannot read property 'props' of undefined

As the error message suggests, it’s inferring an invalid name. This can be fixed giving a custom name to the component.

For example to layouts/default.vue

<script>
export default {
  name: 'Default'
}
</script>

Hei @pi0

thanks for support, but unfortunately the problem persists even with v2.12.2 😦

I’m having this in my console:

[Vue warn]: Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

Maybe is because I’m using kind of dynamic layouts based on route. I made a post about this where you can see my code:

https://dev.to/alligatore3/nuxt-js-dynamic-layouts-by-current-route-3jl1

I am using nuxt-vuetify template. I am getting this same warning (not every time but often) when I click on select components e.g. v-select or v-autocomponent.

Hei @pi0

thanks for support, but unfortunately the problem persists even with v2.12.2 😦

I’m having this in my console:

[Vue warn]: Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

Maybe is because I’m using kind of dynamic layouts based on route. I made a post about this where you can see my code:

https://dev.to/alligatore3/nuxt-js-dynamic-layouts-by-current-route-3jl1

+1 At the same time i got error ERROR [Vue warn]: Invalid component name: "_2d21d098". Component names should conform to valid custom element name in html5 specification. in server console

As the error message suggests, it’s inferring an invalid name. This can be fixed giving a custom name to the component.

For example to layouts/default.vue

<script>
export default {
  name: 'Default'
}
</script>

Yes, as @IvanArjona said.

UPDATE: One of my first issues were caused by WebStorm since when you right-click to create a new Vue component and, let’s suppose, we create a new dynamic page, WS will automatically create a name with that underscore. At first I didn’t recognize it.

Getting this error in v2.14.0…

Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

Any update or workaround?

Same here.

In my case, I just remove

build: {
    // splitChunks: {
    //   layouts: true
    // },
}

in nuxt.config.js, It works.

Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

Any update or workaround?

Try add any name to default layout, how message say to you =)

    export default {
        name:"DefaultLayout",
    }

It’s work for me

@ram-you Yes, you’re right, I just point it out the relation with build.splitChunks.layouts but not solved the problem, only for investigating purpose.

It’s seems like PR #7128 and here leads this problem, any ideas?

@MLDMoritz I think this should be handled internally by Nuxt itself.

@pi0 @Alligatore3 I have the same issue and I am not using dynamic layouts based on route