Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

click the checkbox

What is expected?

everything is fine

What is actually happening?

TypeError: Cannot read properties of null (reading 'insertBefore')

Only reproduced in production environments

related https://github.com/vuejs/core/issues/5650

the error message is not same in chrome and firefox:

chrome:

firefox:

the error of slot function execution affects block tracking,as a workaround,add setBlockTracking(1) in catch.

@javastation When remove the outer div, the error seems gone sfc playground , so add a try catch maybe not a good fix.

@javastation When remove the outer div, the error seems gone sfc playground , so add a try catch maybe not a good fix.

Although there is no visual error in this example, it will enter full diff mode. If there are some other static html elements in addition to these three dynamic children, it will cause unnecessary performance consumption.

Not sure if try-catching the rendering of a slot is something that is supposed to be possible

@javastation I don't understand why add a outer div will cause this error.

@javastation I don't understand why add a outer div will cause this error.

flowchart TB
    subgraph A[showTable change]
        direction LR
            2(patch root vnode)-->3(root.el=preRoot.el):::red-->4(dynamicChildren!=null)-->|true|5(patch dynamicChildren,mount table using oldEl.parentNode)-->6(end:secondDiv.el is null):::red
        end
    subgraph B[checkbox change]
        direction LR
            12(patch root vnode)-->13(root.el=preRoot.el):::red-->14(dynamicChildren!=null)-->|false|15(full diff)-->16(diff second div,second.el = preSecond.el):::red-->17(now secondDiv.el:null)
        end
        A-->B
        classDef red fill:#faa;

The value of the second div vnode.el is null which affects the subsequent process, in my opinion.

hi ,i use nuxt3 + element plus，also have this issue， there this my can do minimal repo: https://stackblitz.com/edit/nuxt-starter-hfqdfg?file=app.vue

error will show in console

This problem always occurs in pages that use keep-alive.

This problem always occurs in pages that use keep-alive.

Could you provide a minimal repro?

This problem always occurs in pages that use keep-alive.

Could you provide a minimal repro?

No,doesn't always appear, and only appears in production environment.

sfc.vuejs.org/

If you remove the m-table component first, then restore it, it will not give an error.

Hello! Thank you for your work. Is it possible to hope that PR will it be accepted soon? https://github.com/vuejs/core/pull/5670

Our team has encountered a similar error in production and we have no ideas how to fix it from our side.

hey! got the same thing here:

For us, this was triggered when Firefox is auto-filling some inputs, but I don't think it's relevant. The important thing is that it's only happening in prod mode...

After digging a little bit, it looks like the insertBefore function was called on an null container.

We've actually lost some mental sake points trying to debug this! So we will be forever grateful if you could push a fix soon!

Hi everyone. I also have this issue only in prod mode. A temporary workaround: remove a key attribute from your v-for. The error will still be in the console, but it fixes the issue with the rendering

Hi everyone. I also have this issue only in prod mode. A temporary workaround: remove a key attribute from your v-for. The error will still be in the console, but it fixes the issue with the rendering

In my case, I don't have any v-for in this page... I do have a v-if , but I can't get rid of it...

Hi. I also have this issue only in prod mode.

The render function is also a workaround, like above reproduction:sfc.vuejs.org

I also had this issue only in prod mode.
vue3报错TypeError: Cannot read properties of null (reading 'insertBefore') helped me fix it.

Before

<el-table :columns="columns" :dataSource="dataSource">
  <template #default="{ row }">
     <span>{{ row.list.length }}</span>
  </template>
</el-table>

After

<el-table :columns="columns" :dataSource="dataSource">
  <template #default="{ row }">
     <span>{{ row?.list?.length }}</span>
  </template>
</el-table>

I encounter this issue too. It only happens on SSR and production build. I tried my best to create the minimal reproduction sfc.vuejs.org

Some conditions are required to produce the bug:

• You must change the props's value by checking the check box
• The v-for items are modified on the mounted hook
• The dynamic element needs to be wrapped deep enough (3 div)

If anyone is still dealing with this. We worked around the error by replacing most of our v-if to v-show.

If anyone is still dealing with this. We worked around the error by replacing most of our v-if to v-show.

Nice 😄 😄 😄

I'm also facing this issue using the nuxt-rc6. Real pain.

@HarisSpahija it dosn't work in my projects.

我给了我项目里的所有点式操作加上了可选操作符，然后解决了这个问题。 跟 @JimSuen 一样的解决方式，就像下面这样子，

<template #roles="scope">
  <template v-if="scope.row.roles?.length">
    <el-tag v-for="(item, index) in scope.row.roles" :key="item" size="small">
      {{ item }}
    </el-tag>
  </template>
</template>

<template #status="scope">
  <el-switch :disabled="scope.row.roles?.includes('super-admin')"></el-switch>
</template>

虽然暂时解决了问题，但是在开发者工具上面的错误提示，让人费解，无法定位问题所在。 我尝试了在build代码的时候，关闭掉minify功能，然后打条件断点，想定位是哪个组件出现了问题，但是无法定位出来问题。 而且一打上条件断点，应用渲染变得十分缓慢，调试地很难受，

TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (index.695120fe.js:4:43972)
    at w (index.695120fe.js:4:25619)
    at g (index.695120fe.js:4:25186)
    at Y (index.695120fe.js:4:32407)
    at P (index.695120fe.js:4:30866)
    at D (index.695120fe.js:4:27423)
    at E (index.695120fe.js:4:25986)
    at g (index.695120fe.js:4:25300)
    at Y (index.695120fe.js:4:31395)
    at P (index.695120fe.js:4:30866)

TypeError: Cannot destructure property 'bum' of 'U' as it is null.
    at J (index.695120fe.js:4:34070)
    at re (index.695120fe.js:4:33352)
    at q (index.695120fe.js:4:34410)
    at re (index.695120fe.js:4:33570)
    at q (index.695120fe.js:4:34410)
    at re (index.695120fe.js:4:33570)
    at q (index.695120fe.js:4:34410)
    at re (index.695120fe.js:4:33570)
    at J (index.695120fe.js:4:34151)
    at re (index.695120fe.js:4:33352)

像这样子的报错，让我十分困惑，很难定位问题所在。vue/core 应该有更友好的报错提示！

I had the same error. I was able to fix by wrapping the root node with <Suspense> in my case.

We were facing the same problem and as of complexity of our application non of the suggestions were easily applicable/not working (such as v-if -> v-show, playing with :key, tabindex, div nesting..). So we ended up applying #5670 locally in postinstall script - that resolved it.

I also had this issue only in prod mode. vue3报错TypeError: Cannot read properties of null (reading 'insertBefore') helped me fix it.

Before

<el-table :columns="columns" :dataSource="dataSource">
  <template #default="{ row }">
     <span>{{ row.list.length }}</span>
  </template>
</el-table>

After

<el-table :columns="columns" :dataSource="dataSource">
  <template #default="{ row }">
     <span>{{ row?.list?.length }}</span>
  </template>
</el-table>

thank you for this , this is perfectly working

I also had this issue only in prod mode. vue3报错TypeError: Cannot read properties of null (reading 'insertBefore') helped me fix it.

Before

<el-table :columns="columns" :dataSource="dataSource">
  <template #default="{ row }">
     <span>{{ row.list.length }}</span>
  </template>
</el-table>

After

<el-table :columns="columns" :dataSource="dataSource">
  <template #default="{ row }">
     <span>{{ row?.list?.length }}</span>
  </template>
</el-table>

Thank you for your information!

Development and production are not unified