I encountered a strange issue where my Vue compiler was refusing to render the default named slot of a child component.
Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
Even my VSCode highlighted this problem and provided me with the following advice:
Cannot read properties of undefined (reading 'type'); Each *.vue file can contain at most one top-level block; Contents will be extracted and passed on to @vue/compiler-dom, pre-compiled into JavaScript render functions, and attached to the exported component as its render option.
I attempted to resolve this by simply installing the @vue/compiler-dom module, but it did not work.
I am currently stuck on how to overcome this issue.
Parent_component.vue
<!-- ___ -->
<template>
<!-- ^^^ -->
<div class="entrancePage">
<next-pop-up v-model:show="showPopUp">
<div class="recreatePasswordPopUp">
<!-- __________________________ -->
<template v-if="showPopUp" #header>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
Password Recovery
</template>
<div @click="showPopUp = false" class="primary-button">
Great!
</div>
</div>
</next-pop-up>
</div>
</template>
<style scoped lang="scss" src="./style.scss"></style>
<script src="./script.js"></script>
nextPopUp.vue
<template>
<div class="popUp" v-if="show" @click.stop="hide">
<div @click.stop class="popUp__content">
<div @mouseover="setHoverState(true)" @mouseleave="setHoverState(false)" class="popUp__content__closeBtn" @click="hide">
<img :src="`/img/UI/${ hoverState ? 'cross-active.svg' : 'cross.svg'}`" alt="">
</div>
<!-- __________________ -->
<slot name="header"></slot>
<!-- ^^^^^^^^^^^^^^^^^^ -->
</div>
</div>
</template>
<style scoped lang="scss" src="./style.scss"></style>
<script src="./script.js"></script>