【Svelte】本地正常，线上报错的奇怪问题

这个问题产生的原因是：在 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 的编译优化和运行环境有关：

1. 开发模式 (Dev Mode):Vite 有时会因为模块热更新或单例处理比较宽松，或者在 SSR 渲染过程中，某种巧合下全局上下文还能访问到。
2. 生产环境 (Production):生产环境会进行严格的 Tree-shaking 和代码分割。$app/state在服务器端并没有“当前活跃页面”的概念，它是基于 Svelte 的 Context API 实现的，而load函数执行时并没有进入组件树，所以 Context 为空，触发 Svelte 5 的安全保护机制报错。

总结

在load函数中，请始终使用参数提供的对象：

• 获取路由参数：使用params
• 获取 URL 信息：使用url(例如url.searchParams)
• 获取请求头：使用request
• 获取本地存储/状态：禁止使用，应通过cookies或数据库查询。