runtime-dom.esm-bundler.js?830f:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')

[Xulio-Xulio]

Version

3.2.19

Reproduction link

github.com

Steps to reproduce

runtime-dom.esm-bundler.js?830f:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
at insert (runtime-dom.esm-bundler.js?830f:10)
at mountElement (runtime-core.esm-bundler.js?5c40:3818)
at processElement (runtime-core.esm-bundler.js?5c40:3738)
at patch (runtime-core.esm-bundler.js?5c40:3658)
at patchBlockChildren (runtime-core.esm-bundler.js?5c40:3975)
at patchElement (runtime-core.esm-bundler.js?5c40:3883)
at processElement (runtime-core.esm-bundler.js?5c40:3741)
at patch (runtime-core.esm-bundler.js?5c40:3658)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4276)
at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
insert @ runtime-dom.esm-bundler.js?830f:10
mountElement @ runtime-core.esm-bundler.js?5c40:3818
processElement @ runtime-core.esm-bundler.js?5c40:3738
patch @ runtime-core.esm-bundler.js?5c40:3658
patchBlockChildren @ runtime-core.esm-bundler.js?5c40:3975
patchElement @ runtime-core.esm-bundler.js?5c40:3883
processElement @ runtime-core.esm-bundler.js?5c40:3741
patch @ runtime-core.esm-bundler.js?5c40:3658
componentUpdateFn @ runtime-core.esm-bundler.js?5c40:4276
run @ reactivity.esm-bundler.js?a1e9:160
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6666
flushJobs @ runtime-core.esm-bundler.js?5c40:6905
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:6796
queueJob @ runtime-core.esm-bundler.js?5c40:6790
eval @ runtime-core.esm-bundler.js?5c40:4308
triggerEffects @ reactivity.esm-bundler.js?a1e9:358
trigger @ reactivity.esm-bundler.js?a1e9:328
set @ reactivity.esm-bundler.js?a1e9:475
set @ runtime-core.esm-bundler.js?5c40:6004
eval @ PokemonDetail.vue?3a82:68
Promise.then (async)
fetchData @ PokemonDetail.vue?3a82:65
created @ PokemonDetail.vue?3a82:79
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6666
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6675
callHook @ runtime-core.esm-bundler.js?5c40:2236
applyOptions @ runtime-core.esm-bundler.js?5c40:2138
finishComponentSetup @ runtime-core.esm-bundler.js?5c40:6389
setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:6308
setupComponent @ runtime-core.esm-bundler.js?5c40:6238
mountComponent @ runtime-core.esm-bundler.js?5c40:4091
processComponent @ runtime-core.esm-bundler.js?5c40:4066
patch @ runtime-core.esm-bundler.js?5c40:3661
patchBlockChildren @ runtime-core.esm-bundler.js?5c40:3975
patchElement @ runtime-core.esm-bundler.js?5c40:3883
processElement @ runtime-core.esm-bundler.js?5c40:3741
patch @ runtime-core.esm-bundler.js?5c40:3658
componentUpdateFn @ runtime-core.esm-bundler.js?5c40:4276
run @ reactivity.esm-bundler.js?a1e9:160
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6666
flushJobs @ runtime-core.esm-bundler.js?5c40:6905
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:6796
queueJob @ runtime-core.esm-bundler.js?5c40:6790
eval @ runtime-core.esm-bundler.js?5c40:4308
triggerEffects @ reactivity.esm-bundler.js?a1e9:358
trigger @ reactivity.esm-bundler.js?a1e9:328
set @ reactivity.esm-bundler.js?a1e9:475
set @ runtime-core.esm-bundler.js?5c40:6004
setPokemonUrl @ Pokemon.vue?5075:40
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6666
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6675
emit$1 @ runtime-core.esm-bundler.js?5c40:259
setPokemonUrl @ PokemonList.vue?20f5:67
onClick @ PokemonList.vue?20f5:5
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6666
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6675
invoker @ runtime-dom.esm-bundler.js?830f:347

What is expected?

work

What is actually happening?

dont work

[posva]

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.

Remember to use the forum or the Discord chat to ask questions!

[runxc1]

@Xulio-Xulio did you ever solve this? I'm running into the same issue on a large project

[caozhong1996]

I would say it seems caused by Font Awesome.

https://github.com/Xulio-Xulio/VueJs-Pokedex/blob/b06d7e6814fd137a10b29181690af8618492abe1/pokedex/src/components/PokemonDetail.vue#L46

<i v-else class="fas fa-spinner fa-spin"></i>

Remove those classes, everything will be all right.

<i v-else></i>

Because Font Awesome modified DOM😂

[robmadole]

Using the standard SVG + JavaScript version of Font Awesome is not recommended. Check out the official Vue component we have https://github.com/FortAwesome/vue-fontawesome

[runxc1]

The issues that I am seeing that are throwing the same errors here are with using "vue-fontawesome" . I'll need to fully gut it out of my project but it seems that the project doesn't work well with vue-next. Issues occur when doing conditional rendering and show/hiding something on the page

[fenghw2087]

The issues that I am seeing that are throwing the same errors here are with using "vue-fontawesome" . I'll need to fully gut it out of my project but it seems that the project doesn't work well with vue-next. Issues occur when doing conditional rendering and show/hiding something on the page

I met some error in production when I use "v-if", but it works well in development. When I change "v-if" to "v-show"，the error disappeared.

Are you in the same situation？

[runxc1]

Yes! I hadn't thought of changing from a v-if to a v-show but after going through the various elements that I could change from a v-if to a v-show I was able to get rid of the error. It seems that vue3 has some error with removing an element and putting it back on the page. I couldn't remove all v-if statements as some are rendering only when I have the data. I am starting to think perhaps this is a Vue internal error and not something due to the icon library as I fully replaced all font awesome icons with an X and was able to get the same error.

[soylomass]

Maybe related: https://forum.vuejs.org/t/emitsoptions-error-impossible-to-debug/125512

Solved replacing v-if with v-show

[runxc1]

I commented on your post in the forum @soylomass but yes I think its the same bug in Vue.

[wfk007]

I encountered the same error, confused about v-show works but v-if not

[matrunchyk]

@posva it's not that easy to make a reproduction link as it's not that easy to reproduce. For example, I have a large project which I cannot share for obvious reasons.
I'd love to create a blank project and share it, but I have no clue how to trigger this issue. It does trigger randomly.
From the forums and issues on this repo I noticed that many people experiences this, however, I cannot reproduce it due to its random (but often) nature. 😢

[davidboom95]

Same here. The error is random. It happens often. I have absolutely no way of knowing where the error is happening. It propagates back to all components in the tree