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

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

Closed
msidolphin opened this issue Apr 2, 2022 · 35 comments · Fixed by #5670
Closed

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

msidolphin opened this issue Apr 2, 2022 · 35 comments · Fixed by #5670
Labels
p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. need guidance The approach/solution in the PR is unclear and requires guidance from maintainer to proceed further.

Comments

@msidolphin
Copy link

msidolphin commented Apr 2, 2022

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')

image


Only reproduced in production environments

@kikyous
Copy link

kikyous commented Apr 2, 2022

related #5650

the error message is not same in chrome and firefox:

chrome:
图片

firefox:
图片

@javastation
Copy link
Contributor

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

@kikyous
Copy link

kikyous commented Apr 6, 2022

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

@javastation
Copy link
Contributor

@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 posva added the need guidance The approach/solution in the PR is unclear and requires guidance from maintainer to proceed further. label Apr 7, 2022
@posva
Copy link
Member

posva commented Apr 7, 2022

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

@kikyous
Copy link

kikyous commented Apr 7, 2022

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

@javastation
Copy link
Contributor

javastation commented Apr 8, 2022

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

@baixiaoyu2997
Copy link

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
Copy link

ff77645 commented Jun 9, 2022

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

@javastation
Copy link
Contributor

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

Could you provide a minimal repro?

@ff77645
Copy link

ff77645 commented Jun 9, 2022

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
Copy link

ff77645 commented Jun 9, 2022

sfc.vuejs.org/

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

@lakkinzimusic
Copy link

lakkinzimusic commented Jun 10, 2022

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.

Screenshot from 2022-06-10 20-28-45

@BabOuDev
Copy link

BabOuDev commented Jun 29, 2022

hey! got the same thing here:

image

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
Copy link

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
Copy link

BabOuDev commented Jul 6, 2022

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
Copy link

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

@javastation
Copy link
Contributor

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

@JimSuen
Copy link

JimSuen commented Jul 12, 2022

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
Copy link

duannx commented Jul 15, 2022

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
Copy link

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

@Oleksii14
Copy link

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

Nice 😄 😄 😄

@jontybrook
Copy link

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

@chenhaihong
Copy link

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

@y15e
Copy link

y15e commented Sep 4, 2022

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

@TheTrunk
Copy link

TheTrunk commented Sep 7, 2022

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.

@Aliuet
Copy link

Aliuet commented Sep 12, 2022

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>

@Aliuet
Copy link

Aliuet commented Sep 12, 2022

thank you for this , this is perfectly working

@shu16
Copy link

shu16 commented Sep 16, 2022

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
Copy link

Development and production are not unified
C5560A04-16B8-4a6a-99E5-A8C6104C8B5A
C99E1221-A137-4a97-9AFC-77E3FB9F7A98

@antfu antfu added the p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. label Oct 10, 2022
@Rachael0108
Copy link

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

yyx990803 pushed a commit that referenced this issue Oct 14, 2022
@heibaikn
Copy link

heibaikn commented Oct 21, 2022

I also had this issue only in prod mode at vue@3.2.14, 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
Copy link

chetan commented Oct 31, 2022

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
Copy link

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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. need guidance The approach/solution in the PR is unclear and requires guidance from maintainer to proceed further.
Projects
None yet