`mountChildren` Uncaught TypeError: Cannot read properties of null (reading 'length')

[codesyofo]

Vue version

3.4.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-dp5c9p?file=src%2FApp.vue

Steps to reproduce

<div>
  {show.value ? <div>show</div> : <></>}

  <button onClick={(show.value = !show.value)}>toggle</button>
</div>

--> Uncaught TypeError: Cannot read properties of null (reading 'length')

<div>
  {show.value ? <div>show</div> : <> </>}

  <button onClick={(show.value = !show.value)}>toggle</button>
</div>

--> it's ok

What is expected?

.

What is actually happening?

.

System Info

No response

Any additional comments?

No response

[LinusBorg]

Rendering an empty Fragment isn't necessary here, just use null.

We can handle an empty Fragment better, though.

[AhmadALi-glitch]

glad to give a hand !
so you're trying to conditionally render html tag ..
you can achieve this using v-html directive :

in the script section :

let htmlSect = show.value ? '<div>show</div>' : '';

in the template section :

<div>
  <div v-html="htmlSect" ></div>
  <button onClick={(show.value = !show.value)}>toggle</button>
</div>

[LinusBorg]

v-html is not a solution / relevant here. OP doesn't have a usage question, they reported a bug in our handling of Frament elements.

[AhmadALi-glitch]

I'm Sorry , I didn't understand the context of the OP