Next.js(SSR)部署Firebase Functions遇./standalone导出错误求助

问题根源分析 #

你遇到的错误核心有两个可能原因：

1. 错误的依赖导入：从报错的导入追踪可以看到，你的Next.js页面（./pages/function.js）中直接导入了firebase-functions——这个库是用于编写Firebase Cloud Functions后端代码的，不能在前端页面/组件中使用，浏览器环境无法解析它的后端依赖。
2. 版本兼容性冲突：firebase-admin@11.0.1和firebase-functions@3.22.0之间存在依赖版本不匹配，导致@firebase/database-compat的导出结构不兼容。

解决方案 #

1. 移除前端页面中对firebase-functions的导入 #

检查pages/function.js中的代码，把所有导入firebase-functions的语句删除，比如：

// 删掉这类导入
import * as functions from "firebase-functions";

firebase-functions应该只在你的Cloud Functions代码目录（通常是项目根目录下的functions/文件夹）中使用，用于定义后端函数，而不是在Next.js的前端页面里调用。

2. 对齐依赖版本并重新安装 #

如果确认导入没问题，那就是版本冲突导致的，按以下步骤操作：

• 修改package.json中的依赖版本为兼容组合（适配Node.js 16）：

  "firebase-admin": "^11.11.0",
  "firebase-functions": "^4.4.1"
  

• 删除node_modules文件夹和package-lock.json（或yarn.lock）：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

3. 确认Next.js部署配置正确 #

部署Next.js到Firebase Functions时，需要确保Next.js的输出配置正确，在next.config.js中开启standalone模式（Next.js 12+支持）：

module.exports = {
  output: "standalone",
  // 你之前添加的webpack fallback配置可以保留
  webpack: config => {
    config.resolve = {
      ...config.resolve,
      fallback: {
        fs: false,
        path: false,
        os: false,
        child_process: false,
        net: false,
        tls: false,
      },
    };
    return config;
  },
};

这个配置会让Next.js生成一个独立的、包含所有依赖的输出目录，更适合部署到Firebase Functions。

验证部署 #

完成以上步骤后，重新尝试部署：

firebase deploy --only functions,hosting

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