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

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

[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

[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.