runtime-dom.esm-bundler.js?830f:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
Version
3.2.19
Reproduction link
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
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!
@Xulio-Xulio did you ever solve this? I'm running into the same issue on a large project
I would say it seems caused by Font Awesome.
<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😂
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
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
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？
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.
Maybe related: https://forum.vuejs.org/t/emitsoptions-error-impossible-to-debug/125512
Solved replacing v-if with v-show
I commented on your post in the forum @soylomass but yes I think its the same bug in Vue.
I encountered the same error, confused about v-show works but v-if not
@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. 😢
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