Default layout multiple named slots not working

[fidderr]

how can i access named slots that are present in the default layout, from the current page?

app.js:

    resolve: async (name) => {
      let page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
      page.default.layout = page.default.layout || layout
      return page;
    },

example layout:

<template>
<div><slot name="header"/></div>
<div><slot/></div>
</template>

page:

<template>
        <template #header>
        header slot
        </template>

        <div>
            default slot
        </div>
</template>

this generates the error:
[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first.

i can get rid of the error if i remove #header but then it is not placed correctly in the slot.

[fidderr]

i was able to create a crude work-around that works for me but it is not really a valid fix:

app.js inside of createInertiaApp:

    resolve: async (name) => {
      let page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
      page.default.layout = name.startsWith('Public/') ? undefined : layout;
      return page;
    },

example layout:

<template>
<div><span data-slot="header" /></div>
<div><slot/></div>
</template>

page:

<script setup>
import LayoutSlot from '@/Components/LayoutSlot.vue';
</script>

<template>
    <LayoutSlot slot="header">
            header slot
    </LayoutSlot>
    <div>
          main slot
    </div>
</template>

component:

<script setup>
import { onMounted, ref, toRefs, computed } from 'vue';

const props = defineProps({
    slot: {
        type: String,
        required: true
    }
});

const { slot } = toRefs(props)

const mounted = ref(false);

onMounted(() => mounted.value = true);

const to = computed(() => {
    return `[data-slot="${slot.value}"]`;
});

</script>

<template>
    <Teleport :to='to' v-if="mounted">
        <slot/>
    </Teleport>
</template>