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 · 47 comments · Fixed by #5670
Closed

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

msidolphin opened this issue Apr 2, 2022 · 47 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

@ghost
Copy link

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

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

chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
@soylomass
Copy link

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

Doeke commented Apr 9, 2023

@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

zhangzhonghe pushed a commit to zhangzhonghe/core that referenced this issue Apr 12, 2023
@FVolral
Copy link

FVolral commented Apr 19, 2023

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.

LucasSteer added a commit to LucasSteer/lucassteer_website that referenced this issue May 23, 2023
- would get locked if space, enter, or click during expand or collapse
- v-if to v-show based on: vuejs/core#5657
@BenNiks1
Copy link

BenNiks1 commented May 24, 2023

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

frosk1 commented May 26, 2023

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

Opened again?

@drossner
Copy link

drossner commented Jun 2, 2023

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

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?

Screenshot 2023-06-20 at 10 26 21

@HasanMothaffar
Copy link

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

jxjj pushed a commit to UMN-LATIS/elevator-ui that referenced this issue Jul 7, 2023
There's a bug that appears when building for production if Transition wraps an element without a `v-if`.

vuejs/core#5657
@volk234
Copy link

volk234 commented Jul 20, 2023

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

LucasSteer added a commit to LucasSteer/lucassteer_website that referenced this issue Jul 30, 2023
- would get locked if space, enter, or click during expand or collapse
- v-if to v-show based on: vuejs/core#5657
@frosk1
Copy link

frosk1 commented Aug 31, 2023

why is this one not open????

@soylomass
Copy link

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

frosk1 commented Aug 31, 2023

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

@github-actions github-actions bot locked and limited conversation to collaborators Sep 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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