DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Vue.js version

2.0.0-beta.7

Steps to reproduce

Use browserify-simple-2.0 or webpack-simple-2.0 vue cli template with hot module replacement. Hard reload won’t reproduce this issue.

<template>
  <div id="app">
    <div v-for="item in 10">
      <!-- Without :key in span tag, when you reduce the range (e.g.: from 10 to 5) error will occur. When increasing range error is not present. -->
      <span>M</span>
      <!-- <span :key="item">M</span> -->
    </div>
  </div>
</template>

What is Expected?

Use hmr without a need to use :key on static element?

What is actually happening?

DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node. is thrown whenever you reduce v-for range and you don’t provide :key property to static element inside v-for.

[fabien-lg]

@moonlik I had the same issue, and moved the component call at the top of the template and it worked…

[LinusBorg]

Please dont comment on old, closed(!) issues over and over. The original issue was fixed, so if your problem is a bug, it’s likely not the same thing, and you should either ask for help on the forum or open a new issue for a proper bug report with an interactive reproduction.