这个问题产生的原因是:在 Svelte 5 中,你不能在+page.server.ts的load函数中使用$app/state(如page) 或$app/stores。
错误信息lifecycle_outside_component表明你尝试在 Svelte 组件生命周期之外(即在纯服务器端代码中)访问了 Svelte 的响应式状态。
为什么会报错?
$app/state中的page是为UI 组件设计的,用于在浏览器中或组件渲染期间获取页面状态。而+page.server.ts的load函数运行在服务器端,它本身就是一个获取数据的上下文,SvelteKit 已经通过参数(event对象)把你需要的所有数据传给你了。
修复方案
直接从load函数的参数中获取params,不要从$app/state导入。
修改后的代码:
importtype{PageServerLoad}from'./$types';import{API}from'$lib/api';// 1. 删除这一行,不要在 server load 中使用 $app/state// import { page } from '$app/state';exportconstload:PageServerLoad=async({fetch,request,params})=>{letretData={}asany;// 2. 直接使用参数里的 paramsconsturl=`${API.stories}/${params.id}`;retData.url=url;returnretData;}为什么本地正常,上线报错?
这种现象通常与 SvelteKit 的编译优化和运行环境有关:
- 开发模式 (Dev Mode):Vite 有时会因为模块热更新或单例处理比较宽松,或者在 SSR 渲染过程中,某种巧合下全局上下文还能访问到。
- 生产环境 (Production):生产环境会进行严格的 Tree-shaking 和代码分割。
$app/state在服务器端并没有“当前活跃页面”的概念,它是基于 Svelte 的 Context API 实现的,而load函数执行时并没有进入组件树,所以 Context 为空,触发 Svelte 5 的安全保护机制报错。
总结
在load函数中,请始终使用参数提供的对象:
- 获取路由参数:使用
params - 获取 URL 信息:使用
url(例如url.searchParams) - 获取请求头:使用
request - 获取本地存储/状态:禁止使用,应通过
cookies或数据库查询。