如何在Svelte中引入简单组件？SvelteKit引入组件报SSR无效错误

你遇到的报错是导入组件时误用了命名导出语法导致的。Svelte单文件组件为默认导出，导入时不需要用{}包裹组件名。

修正后的父组件代码 #

<script>
    // 去掉导入语句的花括号，使用默认导入语法
    import ColorTest from '$lib/ColorTest.svelte';
</script>

<div class="content">
    <h1>Parent Page</h1>
    <p>Placeholder for future content</p>
    <ColorTest />
</div>

临时调试的简化方案 #

因为你只是临时调试CSS颜色，不需要长期复用该组件，也可以直接把ColorTest.svelte里的模板、样式代码直接复制粘贴到parent.svelte的对应位置，不需要走组件导入逻辑，调试完成后直接删掉对应代码即可，操作更简单。另外ColorTest.svelte没有用到任何组件逻辑，内部的<script>代码段可以直接删除，不影响功能。

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