Vue: TypeError: Cannot read property 'toLowerCase' of undefined at emptyNodeAt

[invisor]

Version

2.5.17

Reproduction link

https://jsfiddle.net/rn58agzj/

Steps to reproduce

I trying to use async components on my site based on nuxt. But I think bug is in Vue.
I have a component with multiple subcomponents. I try to import this component asynchronously.
Then when a use hard page reloading in a browser (chrome, firefox etc.) there is a chance to this issue appear

What is expected?

There are no errors expected

What is actually happening?

There is an error: TypeError: Cannot read property 'toLowerCase' of undefined at emptyNodeAt

The error is emitting from this function that part of Virtual DOM patching algorithm:

function emptyNodeAt (elm) {
    return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
}

---

I can't reproduct code via jsFiddle. There is a lot of code. There are some code examples in screenshots
https://www.dropbox.com/sh/ucon2v5u5dmcag4/AAD_h9Q7ASHUJWsi0_dRORJla?dl=0

[Justineo]

I'm sorry but a minimal reproduction is required for bug reports. You can try CodeSandbox if JSFiddle isn't sufficient for your case.

[invisor]

@Justineo I found the way how this bug happens. If you use async components and one of these components or its child has v-if directive at the top div (or other) element in its template, this bug has a chance to occur. So it is not recommended to use v-if directive at the top element in the component's template

[MrSuperJ]

I had the same problem.

[AGPDev]

@Justineo i have this issue too, please reopen

[anat]

Same here

[webislife]

have same problem

[anat]

This is Nuxt related thing, you should look at the nuxt relative bug.
I don't remember how I fixed it but look throught the nuxt issues on github ;)

[anat]

In my memories there is a procedure, first is to update your nuxt version :
https://github.com/nuxt/nuxt.js/issues/1449#issuecomment-360420390

[webislife]

@anat it is not nuxt bug, i use vue ssr mode with native nodejs without nuxt. i solved my problem just replace v-if -> v-show in root tag in one component

[devchenyan]

have the same question in v2.6.10

[uchennaemeruche]

@weblife is right, just change the v-if to v-show in the root component.

[augnustin]

The issue is definitely hard to reproduce.

Why is that? Because if the reason why the bug occurs is clear, it is almost impossible to tell where it happens.

The only solution I found to debug this is to go back in git history until the bug disappears and then trying every modification to isolate the faulty one.

A nightmare.

Almost a NOGO for nuxt I'd say, since the whole app breaks if this happens.

[francesco-hayes]

After days of searching for solutions, I have finally found an answer that has fixed it for my Nuxt project running on version 2.12.0!

@webislife was technically right with the problem being caused by the use of "v-if" in the root of a component or file.

In my project, I had a component imported to the layout and on its tag a "v-if" statement, which was causing the issue. It seems to only occur in SSR or Universal mode, so I just moved my "v-if" statement within the components file under the root.

Anyways, give that a look for anyone currently facing this problem.

[melon]

After days of searching for solutions, I have finally found an answer that has fixed it for my Nuxt project running on version 2.12.0!

@webislife was technically right with the problem being caused by the use of "v-if" in the root of a component or file.

In my project, I had a component imported to the layout and on its tag a "v-if" statement, which was causing the issue. It seems to only occur in SSR or Universal mode, so I just moved my "v-if" statement within the components file under the root.

Anyways, give that a look for anyone currently facing this problem.

you saved my day buddy!

[front-end-developer-candy]

This problem still exists in 2.6.11. ToLowerCase will throw an exception because the custom component does not have a tagName. If you are in an SSR project, you can avoid this problem by adding

<div v-if=" XXX "><your-component/></div>

for the parent component