Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to execute 'insertBefore' on 'Node' with v-else #622

Closed
cexbrayat opened this issue Jan 15, 2020 · 0 comments
Closed

Failed to execute 'insertBefore' on 'Node' with v-else #622

cexbrayat opened this issue Jan 15, 2020 · 0 comments

Comments

@cexbrayat
Copy link
Member

cexbrayat commented Jan 15, 2020

Version

3.0.0-alpha.2

Reproduction link

https://github.com/chz/vue-next-test

Steps to reproduce

Add a component with:

<input id="role-input" v-model="user.role" />
<div id="else">
      <div v-if="user.role === 'ADMIN'">
        <h2>Admin</h2>
      </div>
      <div v-else>
        <h2 id="hello">Hello</h2>
      </div>
      <div id="other">other</div>
</div>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'VElse',
  setup() {
    return {
      user: reactive({
        role: 'ADMIN',
        name: 'Cédric'
      })
  }
});

then enter a different value in the input

What is expected?

The v-else node should be inserted

What is actually happening?

A error is thrown:

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.
    at insert (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:175:20)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2002:9)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1955:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1920:21)
    at patchBlockChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2125:13)
    at patchElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2091:13)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1958:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1920:21)
    at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2387:17)
    at run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:115:20)

This is very similar than #604 that should have been fixed in alpha.2.
Replacing fallbackContainer by hostParentNode(oldVNode.el) in patchBlockChildren does fix the issue, so the condition is still not perfect.

@github-actions github-actions bot locked and limited conversation to collaborators Nov 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant