Strange compile error in vue by use template for slot

Question

I had a strange problem. My vue compiler don't want to render default named slot of child.

Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.

My VSCode also underline this case. It give me the 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've tried just install this module (@vue/compiler-dom) but it not worked.

I have no idea to resolve this problem.

Parent_component.vue

<!-- ___ -->
<template>
<!-- ^^^ -->
    <div class="entrancePage">
        <next-pop-up v-model:show="showPopUp">
            <div class="recreatePasswordPopUp">
                <!-- __________________________ -->
                <template v-if="showPopUp" #header>
                <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
                    Восстановление пароля
                </template>
                
                <div @click="showPopUp = false" class="primary-button">
                    Отлично
                </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>

Answer 1

Not quite sure if this is it, but I believe that all templates should be top level. Can you rewrite Parent_component.vue to something like this:

<template>
    <div class="entrancePage">
        <next-pop-up v-model:show="showPopUp">
            <!-- __________________________ -->
            <template v-if="showPopUp" #header>
            <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
                Восстановление пароля
            </template>
       
            <div @click="showPopUp = false" class="primary-button">
                 Отлично
            </div>
        </next-pop-up>
    </div>
</template>

You'll just need to find another way to apply your recreatePasswordPopUp class

Answer 2

The <template #header> tag must be at the top level of the block. You should rewrite Parent_component's template to according this rule.