Laravel-Inertia-Vue3项目#header插槽触发Codegen node缺失报错求助

我通过Laravel Bootcamp创建项目，跟随Laracasts的《使用Inertia.js构建现代Laravel应用》系列视频学习，在实现持久化布局环节遇到无法解决的错误，尝试网上所有方案均无效，补充相关视频学习也没解决。

已简化代码复现问题：

1. app.js 配置 #

按视频指导及Vue3文档更新，将AuthenticatedLayout设为所有页面的默认持久化布局：

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true});
        let page = pages[`./Pages/${name}.vue`];
        page.default.layout ??= AuthenticatedLayout;
        return page;
    },
});

2. AuthenticatedLayout.vue 代码 #

布局组件定义了header命名插槽和默认插槽：

<template>
    <div>
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
<!-- Page Heading -->
            <header class="bg-white dark:bg-gray-800 shadow" v-if="$slots.header">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    <slot name="header"/>
                </div>
            </header>

            <!-- Page Content -->
            <main>
                <slot />
            </main>
        </div>
    </div>
</template>

3. TagList.vue 代码 #

无错误版本 #

此时仅渲染TAG list，标题未显示（演示用）：

<template>
    <template>
        TODO TAG LIST title
    </template>
    <p>TAG list</p>
</template>

触发错误版本 #

将内部的<template>改为<template #header>，试图把标题放入header命名插槽时，触发编译错误：

<template>
    <template #header>
        TODO TAG LIST title
    </template>
    <p>TAG list</p>
</template>

报错信息 #

6:49:21 PM [vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
  Plugin: vite:vue
  File: /var/www/html/resources/js/Pages/Tag/TagList.vue
      at assert (/var/www/html/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:496:11)
      at genNode (/var/www/html/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2476:7)
[...]

已查阅相关Stack Overflow帖子，问题仍未解决。请问我忽略了什么？

内容的提问来源于stack exchange，提问作者Stéphane