Version

3.2.11

Reproduction link

github.com

Steps to reproduce

child component emited the function after base component update binded ref variable.

What is expected?

update base binding variable

What is actually happening?

Throw exception

Please reduce the reproduction to a smaller scope - ideally using https://sfc.vuejs.org.

I don't know if this is the exact same issue, but I get the same error.

runtime-dom.esm-bundler.js:10
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (runtime-dom.esm-bundler.js:10)
    at mountElement (runtime-core.esm-bundler.js:4145)
    at processElement (runtime-core.esm-bundler.js:4065)
    at patch (runtime-core.esm-bundler.js:3985)
    at mountChildren (runtime-core.esm-bundler.js:4184)
    at patchUnkeyedChildren (runtime-core.esm-bundler.js:4740)
    at patchChildren (runtime-core.esm-bundler.js:4682)
    at processFragment (runtime-core.esm-bundler.js:4382)
    at patch (runtime-core.esm-bundler.js:3981)
    at patchBlockChildren (runtime-core.esm-bundler.js:4302)

To reproduce:

1. Copy the following code to App.vue (I used yarn create vite test --template vue for scaffolding)
2. Run yarn dev
3. View the page in the browser and click "Add Item"
4. Type in a name
5. Click "Add Item" again and the error should appear

<script>
export default {
    data() {
        return {
            items: [],
        }
    },

    methods: {
        addItem() {
            this.items.push({
                name: '',
                email: '',
            })
        }
    },
}
</script>

<template>
    <h1>Items</h1>
    <table>
        <thead>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    Email
                </td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in items">
                <td>
                    <input v-model="item.name" />
                </td>
                <td>
                    <input v-model="item.email" />
                </td>
            </tr>
        </tbody>
    </table>
    <button
        type="button"
        @click="addItem"
    >
        Add Item
    </button>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

works fine in sfc, Maybe relate to HMR.

@Magnie

Copy the following code to App.vue (I used yarn create vite test --template vue for scaffolding) Run yarn dev View the page in the browser and click "Add Item" Type in a name Click "Add Item" again and the error should appear

I made a fresh demo but can not repro it.

@metalsimyaci feather.replace() modifies the DOM, it can't be used combine with Vue. Vue can only manipulate the DOM assuming it's not going to be mutated by other sources. Refer: https://github.com/vuejs/vue-next/issues/3769#issuecomment-840870557

@edison1105 Hmm, you are right. Try clicking on the "Version" dropdown in the top right.

@metalsimyaci feather.replace() modifies the DOM, it can't be used combine with Vue. Vue can only manipulate the DOM assuming it's not going to be mutated by other sources. Refer: #3769 (comment)

Thanks For helping.

Feather icon library not healty for vue 3 compositiyon API.