Passing component to nested slots gives TypeError: Cannot read property 'parentNode' of null

[jmhmd]

Version

3.0.11

Reproduction link

https://codesandbox.io/s/naughty-carson-95syx?file=/src/App.vue

Steps to reproduce

Click the rendered dropdown button with the component included in the slot "popoverContent". Commenting out the component and refreshing gives expected behavior, toggling the popover with "hello".

What is expected?

Expect to be able to render arbitrary content, including other components, in the nested slots.

What is actually happening?

When a component is included in the nested slot content, an error is thrown: "TypeError: Cannot read property 'parentNode' of null."

This error goes away and normal behavior is seen when only text is included in the slot.

---

I am implementing a custom toolbar with buttons that can be passed content to be displayed in a popover. The component has a slot "popoverContent". then includes a component with a slot "content". The content is passed through those two slots. Including any other component in that slot content produces this error.

[HcySunYang]

Here is a workaround https://codesandbox.io/s/nostalgic-water-cjnrw?file=/src/ControlButton.vue, see the ControlButton.vue

Edit: #1745 (comment)

Also, if you are trying to check for presence of a slot, you should do !!$slots.default in the template (don't call it)

[Alanscut]

Removing && this.$slots.popoverContent() of the hasPopover function also works, that's strange...
https://codesandbox.io/s/eloquent-sun-29s91?file=/src/ControlButton.vue

[HcySunYang]

The root cause of the problem is the same as #1745, I am thinking of a solution...

[jmhmd]

Thanks so much for the workaround! can confirm it is working for me.

[jmhmd]

FYI @HcySunYang when using your workaround, the same error re-appeared when using the production build (built with vite). @Alanscut solution (just removing function call) works in both dev and in production build.

[HcySunYang]

Yeah, removing that is the correct and recommended workaround.

[RemMai]

老哥，我就问这个问题解决没有。
我使用

 <suspense>
    <router-view />
  </suspense>

包含子页面的时候，子页面全部是 async setup {} ， 如果切换过快的话，会出现TypeError: Cannot read property 'parentNode' of null
而且后面 router.push() 无法进行跳转。

啥时候解决啊，谢谢大佬啊