Cannot read properties of null (reading 'insertBefore')

[baixiaoyu2997]

Environment

Nuxt project info: 19:20:02

---

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-27500344.7fb29b3
• Package Manager: yarn@1.22.18
• Builder: vite
• User Config: target, alias, plugins, vite
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-hfqdfg?file=app.vue

Describe the bug

see console in https://nuxt-starter-hfqdfg--3000.local.webcontainer.io/ ,will display Cannot read properties of null (reading 'insertBefore')

not sure this is nuxt bug, i have also found in vue3

Additional context

No response

Logs

No response

[danielroe]

not sure this is nuxt bug, i have also found in vuejs/core#5657

Would you try to recreate in https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main first then?

[tiborpino]

Do you have one root element?

[danielroe]

Here's an example without Nuxt: https://stackblitz.com/edit/github-tudhv3 - same issue.

I think it's an issue with the el-popover element, as when I swap it out (see https://stackblitz.com/edit/github-tudhv3-ghjbrs), everything works fine again.

I'd suggest raising it on element-plus instead.

[baixiaoyu2997]

thanks!

[danekslama]

@danielroe we experienced similar issue with element-plus as well - to be specific with the el-dialog component. The reproduction you made starts working as soon as you remove the parent element of those two spans. I tried to figure out the cause but I have no clue why it starts working as soon as you do this.

Working example:

 <div>
    <span v-if="address"></span>
    <span v-else>Nothing here</span>
  </div>

Not working with div or any other grandparent

  <div>
      <div>
        <span v-if="address"></span>
        <span v-else>Nothing here</span>
      </div>
    </div>

[danielroe]

@danekslama That sounds like a vue (or element-plus) bug. See if you can reproduce on https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter.

[danekslama]

@danielroe after Vue update to 3.4.15 it started working. Unfortunately it still doesn't work on production - same issue in some cases. It is kinda difficult to reproduce now, I will try to discuss the issue elsewhere but it seems that it has been reported many times on element-plus. Hopefully, someone solves it soon.