SvelteKit & TailwindCSS部署Firebase Hosting启用SSR时出现ERR_MODULE_NOT_FOUND错误

我之前部署SvelteKit SSR到Firebase的时候也踩过一模一样的坑——关了SSR啥问题没有，一开SSR就报找不到tailwindcss包，其实问题根源大多和依赖的安装配置或者Firebase的构建运行逻辑有关，给你几个亲测有效的解决思路：

1. 先把TailwindCSS移到生产依赖里 #

这是最常见的触发原因！Firebase的SSR是运行在Cloud Functions的生产环境中，部署时只会安装package.json里dependencies字段下的包；如果你的tailwindcss之前是放在devDependencies里的（很多人初始化项目时会这么加），生产环境就不会安装它，自然就会报找不到模块的错误。

解决方法很简单，把它移到生产依赖：

# npm环境
npm install tailwindcss --save
# pnpm环境
pnpm add tailwindcss
# yarn环境
yarn add tailwindcss

做完这一步后，记得删掉node_modules和锁文件重新安装一次，再构建测试。

2. 检查SvelteKit的Firebase适配器配置 #

确保你用的@sveltejs/adapter-firebase配置正确，没有漏掉SSR相关的配置项。打开svelte.config.js确认配置大概是这样的：

import adapter from '@sveltejs/adapter-firebase';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

适配器会帮你把SvelteKit的SSR代码打包成Firebase Functions能识别的格式，要是配置错了，可能会导致依赖没被正确包含进构建产物。

3. 本地模拟生产环境验证 #

在部署到Firebase之前，先在本地模拟生产环境跑一遍，确认问题是否解决：

# 清空旧依赖和锁文件
rm -rf node_modules package-lock.json
# 只安装生产依赖
npm install --production
# 构建项目
npm run build
# 启动预览服务测试SSR
npm run preview

如果本地预览时也出现同样的错误，那肯定是依赖配置的问题，回到第一步再检查；如果本地正常，那大概率是Firebase的部署缓存在搞鬼。

4. 清理Firebase部署缓存 #

有时候Firebase会缓存之前的构建产物，导致新的依赖没被正确安装。部署的时候加上--no-cache参数强制刷新：

firebase deploy --only hosting,functions --no-cache

如果还是不行，也可以去Firebase控制台的Functions页面，把旧的函数版本删掉，再重新部署一次。

额外排查点 #

如果上面的方法都没用，你可以检查一下：

• 你的SSR页面（比如报错里的_page.svelte.js）是不是直接import了tailwindcss？虽然通常Tailwind是通过PostCSS注入样式的，但如果有直接引用的话，也要确保这个引用逻辑没问题。
• 本地Node.js版本和Firebase Functions的Runtime版本一致（比如Firebase默认用Node.js 18，本地也用18.x版本），版本不兼容也可能导致模块解析异常。

备注：内容来源于stack exchange，提问作者MathankumarK