vue.common.js: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined (on node <!---->)

Seems to happen if I assign a value to a component data property from within the beforeMount() method. The component references the data object like:

 <div v-if="user != null">
      Hello.
 </div>

beforeMount() {
      this.user = this.$store.state.user;
}

Error is being thrown inside vue.common.js, line 4089:

  function assertNodeMatch (node, vnode) {
    if (vnode.tag) {
      console.log("assetNodeMatch", node, vnode);

      return (
        vnode.tag.indexOf('vue-component') === 0 ||
        vnode.tag === nodeOps.tagName(node).toLowerCase() // <----- thrown here
      )
    } else {
      return _toString(vnode.text) === node.data
    }
  }

It’s interesting to note the error is only thrown when I actually assign this.user within beforeMount(). If I leave the v-if reference in the template, but don’t assign anything to the property ever, nothing is thrown. The console.log I put here shows this right before the error is thrown:

assetNodeMatch VNode {tag: “div”, data: undefined, children: Array[1], text: undefined, elm: undefined…}

So it’s seeing the node as plain ‘’, and then nodeOps.tagName can’t find a .tagName property on this given node, so it throws the error. This node is generated by Vue, but I’m not sure why. Maybe it’s if the server and browser template state is not matching (I’m using SSR), but regardless, this error should maybe be handled differently. Anyone have any suggestions?

[LinusBorg]

While I not really know the hydration part of the codebase very well, it seems to me that what you are doing is asking for your App to break.

• you are rendering the component on the server with someData: null
• therefore, that div is not rendered on the server (because of the v-if).
• then, when the App is booting on the client, you change the state of the component to someData: {test: 'test'}
• you do this in created, so before the component’s virtualDOM is being rendered.

This essentially means that the server didn’t render the div, but the virtualDOM on the client expects it to exist.

And the reason that it does not happen when you do it in mounted is that in this case, you change the component’s state after initial client-side render of the virtualDOM.

So the virtualDOM renders without the div (like on the server), and then you change the components state, triggering a re-render that includes the div now.

[LinusBorg]

This is a closed issue about a different problem.

Use forum.vuejs.org for a questions, please.