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>
2
Answers
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:
You’ll just need to find another way to apply your
recreatePasswordPopUp
classThe <template #header> tag must be at the top level of the block. You should rewrite Parent_component’s template to according this rule.