【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 导入。

修改后的代码：

typescript 复制代码

import type { PageServerLoad } from './$types';
import { API } from '$lib/api';
// 1. 删除这一行，不要在 server load 中使用 $app/state
// import { page } from '$app/state'; 

export const load: PageServerLoad = async ({ fetch, request, params }) => {
  let retData = {} as any;
  
  // 2. 直接使用参数里的 params
  const url = `${API.stories}/${params.id}`; 
  
  retData.url = url;
  return retData;
}

为什么本地正常，上线报错？

这种现象通常与 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 或数据库查询。