SvelteKit按钮组件加载后消失且报Illegal invocation错误求助

你遇到的页面内容消失、控制台Illegal invocation错误，核心原因是**+page.svelte中错误地使用了根级<head>和<body>标签**。SvelteKit会自动管理整个页面的文档结构（包括创建<head>、<body>），页面组件仅负责渲染自身的内容部分，手动添加这些根标签会导致DOM结构冲突，触发运行时错误，进而导致页面内容加载后被销毁。

你的Button组件写法本身是正确的（Svelte中on:click无赋值时会自动转发事件），问题不在组件本身。

1. 移除+page.svelte中的<head>和<body>标签，改用Svelte提供的<svelte:head>标签设置页面标题（这是Svelte/Kit中添加头部内容的标准方式）。
2. 保留页面内容的结构（如.title容器），直接作为组件的根内容。

+page.svelte #

<script>
    import Button from '$lib/Button.svelte'
   
    const handleClick = () => {
        console.log("Clicked")
    }
</script>

<svelte:head>
    <title>E-client</title>
</svelte:head>

<div class="title">
    <h1>Welcome to Email Client!</h1>
    <hr/>
    <h3>Log in to access email</h3>
    <Button on:click={handleClick}>Log In</Button>
</div>

Button.svelte（无需修改，保持原写法即可） #

<button on:click>
    <slot/>
</button>

• 你的+layout.svelte写法是正确的，它负责提供页面的通用布局（如导航栏），页面组件的内容会通过<slot/>插入到布局的<main>中。
• 你使用的是Svelte 5测试版，核心规则和稳定版一致，但如果后续遇到其他问题，建议优先参考官方测试版文档。

内容的提问来源于stack exchange，提问作者Ioannis Apostolopoulos