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

[msidolphin]

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

[kikyous]

related #5650

the error message is not same in chrome and firefox:

chrome:

firefox:

[javastation]

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

[kikyous]

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

[javastation]

@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.

[posva]

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

[kikyous]

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

[javastation]

@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;

Loading

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

[baixiaoyu2997]

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

[ff77645]

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

[javastation]

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

Could you provide a minimal repro?

[ff77645]

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.

[ff77645]

sfc.vuejs.org/

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

[lakkinzi]

Hello! Thank you for your work.
Is it possible to hope that PR will it be accepted soon?
#5670

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

[BabOuDev]

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!

[Oleksii14]

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

[BabOuDev]

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...

[eliasbermudez]

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

[javastation]

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

[ghost]

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>

[duannx]

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)

[HarisSpahija]

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

[Oleksii14]

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

Nice 😄 😄 😄

[jontybrook]

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

[chenhaihong]

@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 应该有更友好的报错提示！

[shu16]

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!

[an501920078]

Development and production are not unified

[Rachael0108]

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 already do like this by adding ?. in the scope ,but didn't work, any other ideas? thanks all

[heibaikn]

I also had this issue only in prod mode at [email protected], and I fix by abstracted into components

before

<template>
<div>
     //.....
    <div v-if="isShow" class="section">
    </div>
     //.....
</div>
</template>

after

<template>
<div>
     //.....
    <components :is-show="isShow"></conponents>
     //.....
</div>
</template>

<template>
    <div class="section" v-if="isShow"> 
    </div>
</template>

[chetan]

The slot fix in 3.2.41 did not help in our case. Turns out it was the use of a dynamic component to implement layout switching in our top level App.vue component:

<script setup lang="ts">
const route = useRoute();
const layout = computed(() => {
  return `${route.meta.layout || 'blank'}-layout`;
});
</script>

<template>
  <component :is="layout" />
</template>

Since <component> is the root element, this appears to have caused some race condition in the downstream components when when, as the result of some data changing, both a v-if was getting triggered as well as a route change to a new layout. It appears the downstream component was throwing insertBefore error due to this component being briefly unset? Not entirely clear, however adding the div as below fixed it for me -

<script setup lang="ts">
const route = useRoute();
const layout = computed(() => {
  return `${route.meta.layout || 'blank'}-layout`;
});
</script>

<template>
  <div>
    <component :is="layout" />
  </div>
</template>

I've tried creating a stripped down repro but so far unsuccessful. Hopefully this will help someone resolve this issue if they hit it again in the future.

[william-iq397]

related #5650

the error message is not same in chrome and firefox:

chrome:

firefox:

I'm using nuxt3, this error occurs when I use component

[Anubarak]

I also face this issue but I have no idea how to fix it nor do I know where exactly the issue occurs.
It happens in production and dev mode with PrimeVue when I use nested tabs https://primefaces.org/primevue/tabview.

Sometimes when changing from one tab to another via URL param the error occurs. Is there any plan to fix it entirely?

[soylomass]

Will this ever be fixed? I love Vue, but this is a very annoying problem I run into with every Vue project.
I started a new Nuxt 3 project, and it happened multiple times. The main problem about it is it's almost impossible to debug, the errors don't give any useful information.

        <VaOptionList
          v-model="aiModelSetting"
          :options="aiModelSettings"
          :rules="vRules(['required'])"
          text-by="label"
          value-by="value"
          type="radio"
        />
        <VaSelect
          v-if="aiModelSetting === AiModelSetting.Fixed"
          text-by="title"
          value-by="id"
          background="#ffffff"
          placeholder="Select an AI model"
        />

chunk-KGG2AQEQ.js?v=f26dbba1:7745 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
at insert (chunk-KGG2AQEQ.js?v=f26dbba1:7745:1)
at processFragment (chunk-KGG2AQEQ.js?v=f26dbba1:5778:1)
at patch (chunk-KGG2AQEQ.js?v=f26dbba1:5496:1)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-KGG2AQEQ.js?v=f26dbba1:5930:1)
at ReactiveEffect.run (chunk-KGG2AQEQ.js?v=f26dbba1:207:1)
at instance.update (chunk-KGG2AQEQ.js?v=f26dbba1:6022:1)
at setupRenderEffect (chunk-KGG2AQEQ.js?v=f26dbba1:6030:1)
at mountComponent (chunk-KGG2AQEQ.js?v=f26dbba1:5848:1)
at processComponent (chunk-KGG2AQEQ.js?v=f26dbba1:5813:1)
at patch (chunk-KGG2AQEQ.js?v=f26dbba1:5502:1)

In this code, when aiModelSetting becomes AiModelSettings.Fixed when I press the corresponding VaOption, the error happens and Vue breaks (requires a refresh). I removed the options in the VaSelect to verify it didnt have anything to do with them.

[Doeke]

@soylomass No I don't think it's fixed. I made a new thread here: #7921, the error is slightly different depending on how it is triggered but I think it's the same underlying issue causing a "Cannot read properties of null" in HMR

If it doesn't get fixed soon I'll have to copy all UI components into the project instead of using libraries because it's such a PITA to debug atm

[FVolral]

I also face this issue but I have no idea how to fix it nor do I know where exactly the issue occurs. It happens in production and dev mode with PrimeVue when I use nested tabs https://primefaces.org/primevue/tabview.

Sometimes when changing from one tab to another via URL param the error occurs. Is there any plan to fix it entirely?

I'm also experiencing a similar issue with PrimeVue. I replaced some unnecessary

tags with tags and I'm wondering if that could be related to the issue

Edit

In my case, I've a structure like this :

<div v-if="someCond">
  <Suspense>
    <template v-for="(item, index) in items" :key="index">
      <CustomComponent />
    </template>
    <template #fallback> Loading... </template>
  </Suspense>
</div>

It seems, although not yet clear, that when I replace the root tag, which contains a v-if directive, with a tag, and then make changes in my CustomComponent, it triggers the bug. I hope this information is not misleading.

[BenNiks1]

also faced this problem on nuxt 3.3.1
the error was not always there and I started to move from commit to commit to understand in what moment it appeared and what changes could lead to this error.
in my case, I came to a new project, which is written quite badly and there was such a construction:

<script setup>
...
await fetchCategories()
</script>

i changed it to:

<script setup>
...
useAsyncData('categories', () => fetchCategories())
</script>

and my variant with useAsyncData broke everything :)

[frosk1]

should this error due to the massive unresolved issues be opened again?

Opened again?

[drossner]

It seems, although not yet clear, that when I replace the root tag, which contains a v-if directive, with a tag, and then make changes in my CustomComponent, it triggers the bug. I hope this information is not misleading.

This helped a lot, in my case, removing a v-if from the top level of a template resolved the bug. Now, the v-if directive is applied to a direct child:

<template>
   <div v-if="xxxx">
      <div>With Content</div>
   </div>
</template

Now:

<template>
   <div>
      <div v-if="xxxx">With Content</div>
   </div>
</template

[gbyesiltas]

Yeah I'm getting this as well and moving all the root level v-ifs would be quite some work for our project so would be great if it could be addressed :,) Also, we are getting some Cannot destructure property 'bum' of 'Y' as it is null. errors from the unmountComponent function which I doubt may be related?

[HasanMothaffar]

It turns out in my case the component that was causing this bug was wrapped in a <transition> component. After removing the transition, everything works fine. (Vue version: 3.2.45)

Before:

<template>
	<transition name="fade">
	    <div>
		// .. other divs
	    </div>
	</transition>
</template

After:

<template>
	<div>
	  // .. other divs
	</div>
</template

[volk234]

Same issue in nuxt 3.6.5 and vue 3.3.4.
It happens in production build only.

[frosk1]

why is this one not open????

[soylomass]

why is this one not open????

Because the devs want a reproduction example, something impossible to get because of the random nature of this bug, sadly. If only the error message could be a little bit more descriptive.

[frosk1]

even more important it is to take out the random nature and work on finding a reason from the devs/contributors