SvelteKit使用Node.js适配器部署后点击等事件处理器失效问题

排查思路 #

1. 检查水合（Hydration）配置 #

你使用的是2021年的早期beta版SvelteKit（@sveltejs/kit@1.0.0-next.164），支持全局、页面/路由级别单独关闭客户端水合，水合关闭时客户端不会加载组件的交互逻辑：

• 检查对应路由页面的Svelte文件顶部，是否有export const hydrate = false的配置，如有请删除或改为true
• 检查全局svelte.config.js的kit配置段，是否有全局关闭水合的配置

2. 检查静态资源托管是否正常 #

Node适配器构建后的产物包含两部分：服务端执行代码和build/client目录下的客户端静态JS/CSS资源，静态资源加载失败会导致交互逻辑完全失效：

• 打开生产环境页面的浏览器开发者工具，切换到「网络」面板，检查是否有/_app/immutable/开头的JS资源返回404
• 先执行npm run preview测试构建后的产物，如果preview环境功能正常，说明是你直接启动node build/index.js的部署配置没有正确托管静态资源，需要补充静态资源路由规则

3. 检查是否存在水合报错 #

如果水合过程中出现JS报错，早期beta版SvelteKit会直接终止整个客户端逻辑加载：

• 打开生产环境页面的浏览器开发者工具「控制台」面板，检查是否有JS报错
• 常见的报错原因：代码中直接调用了window/document等浏览器专属API，没有包裹在onMount生命周期中，导致服务端渲染时执行出错，DOM结构和客户端渲染结果不一致，触发水合失败

4. 检查适配器配置是否正确 #

你同时安装了adapter-node和adapter-static两个适配器，容易出现配置错误：

• 确认svelte.config.js中配置的适配器确实是@sveltejs/adapter-node，正确配置示例：

import adapter from '@sveltejs/adapter-node';
export default {
  kit: {
    adapter: adapter()
  }
};

• 删除本地.svelte-kit、build两个目录后重新执行构建命令，避免旧构建产物干扰

补充说明 #

你使用的SvelteKit版本属于非常早期的测试版本，存在大量已知bug，如果以上排查都无法解决问题，建议升级到SvelteKit正式版。

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