Nuxt.js: Cannot read property 'props' of undefined

[MLDMoritz]

Version

v2.12.1

Reproduction link

https://example.com

Steps to reproduce

An upgrade from 2.12.0 to 2.12.1 leads to this error.

I somewhat 'traced' the error and I think it has something todo with templates?

It crashed in the normalizeProps function

function normalizeProps (options, vm) {
  var props = options.props;

.nuxt/App.js

const layouts = { "_clean": sanitizeComponent(_77263413),"_default": sanitizeComponent(_6f6c098b),"_default/footer": sanitizeComponent(_5b8eca9f),"_login": sanitizeComponent(_77a66d33),"_simple": sanitizeComponent(_ee7125b0) }

What is expected ?

Working like version 2.12.0

What is actually happening?

Error

[romukey]

the same error occurs in my project, too

[cron13]

+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

[ram-you]

Have same problem with v2.12.1
ERROR [Vue warn]: Invalid component name: "_6f6c098b". Component names should conform to valid custom element name in html5 specification.

.nuxt-dev/App.js:

const _6f6c098b = () => import('../layouts/default.vue'  /* webpackChunkName: "layouts/default" */).then(m => m.default || m)
const _9f305d28 = () => import('../layouts/guestLayout.vue'  /* webpackChunkName: "layouts/guestLayout" */).then(m => m.default || m)

const layouts = { "_default": sanitizeComponent(_6f6c098b),"_guestLayout": sanitizeComponent(_9f305d28) }

[LuXDAmore]

Same here ✋

[brolnickij]

I have the same problem :(

[stevenho0811]

Same here.

In my case, I just remove

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

in nuxt.config.js, It works.

[daspete]

Same here

it's a problem with the splitChunks of layouts... like @steven0811 said.

[willhalling]

Same problem.

Thanks @steven0811 you've just saved my sanity. I just spent several hours trying to fix.

[ram-you]

@steven0811 Thank you for sharing your solution.
But it would not be a final solution. It's just a workaround and it's a regression.

[stevenho0811]

@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?

[pi0]

Thanks for quickly reporting the issue. It will be fixed soon by #7139. Unfortunately, non of fixtures was using splitChunks.layouts that's why regression happened.

[Alligatore3]

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

[robertofd1995]

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

[dikesh]

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.

[fidopaca]

v2.12.2 and the problem still exists. I am just using nuxt-tailwindcss and did not changed anything on nuxt.config.js. When i route to any page that component exists i am getting that warning. Thanks for help.

[bryanspearman]

Is there a resolution to this issue? I'm getting the same error:
Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

[IvanArjona]

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>

[Alligatore3]

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.

[louisluu]

Running v2.13.3 and still having this issue.

This error message is even showing in nuxt-child page.

My page:

<template>
  <nuxt-child />
</template>

<script>
export default {
  layout: 'admin',
}
</script>

Console output:[Vue warn]: Invalid component name: "pages/settings.vue". Component names should conform to valid custom element name in html5 specification.

Not sure if I should give that page a name?

[farzadso]

@pi0 any updates on this issue?

[MLDMoritz]

Name the component like you name your files.

pages/settings.vue? Component name: SettingsPage

[farzadso]

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

[cssagogo]

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?

[lgXenos]

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

[tenzint]

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

More like templates like create-nuxt-app should have names: "default" in their skeleton code.