Svelte 5开发遇$state未定义报错，求问题排查

出现Uncaught ReferenceError: $state is not defined的核心原因如下：

1. 普通JS文件无法识别$state宏 #

$state是Svelte编译器专属的语法宏，仅能在Svelte组件的<script>标签内被编译器解析处理。你的withPrev.js是普通JavaScript文件，Svelte编译器不会对其中的$state做处理，因此会直接报未定义错误——这也是你在Svelte 5 Playground中同样出错的关键原因。

2. （可选）环境未匹配Svelte 5要求 #

如果组件内的$state也报错，需确认当前环境确实是Svelte 5 Alpha版本：

• Playground需切换到Svelte 5分支
• 本地项目要确保vite-plugin-svelte等构建工具已启用Svelte 5支持

解决方案 #

方案一：将工具函数移到Svelte模块文件中 #

把withPrev.js改为withPrev.svelte，使用<script context="module">导出函数（模块脚本会被Svelte编译器处理）：

<script context="module">
export function withPrevSignals(initialValue) {
    let curr = $state(initialValue)
    let prev = $state(undefined)

    function undo() {
        curr = prev
        prev = undefined
    }
    return {
        get curr() { return curr },
        set curr(newValue) {
            prev = curr
            curr = newValue
        },
        get prev() { return prev },
        undo
    }
}
</script>

随后在App.svelte中修改导入路径：

<script>
    import { withPrevSignals } from './withPrev.svelte'
    // 其余代码保持不变
</script>

方案二：在普通JS文件中使用state函数替代 #

从svelte包导入小写的state函数（这是$state宏对应的底层API），修改withPrev.js：

import { state } from 'svelte';

export function withPrevSignals(initialValue) {
    let curr = state(initialValue)
    let prev = state(undefined)

    function undo() {
        curr = prev
        prev = undefined
    }
    return {
        get curr() { return curr },
        set curr(newValue) {
            prev = curr
            curr = newValue
        },
        get prev() { return prev },
        undo
    }
}

组件内的$state用法无需修改，只要是Svelte 5环境就能正常工作。

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