使用Vite+GitHub Actions部署React应用时Firestore服务不可用

这个报错Uncaught Error: Service firestore is not available通常和Firestore SDK初始化异常、Vite构建时的模块处理问题，或是部署后的资源加载路径有关，以下是针对性的解决步骤：

1. 检查Firestore SDK的引入与初始化方式 #

确保使用Firebase Web SDK v9+的模块化引入，Vite对ES模块支持更友好，避免旧版命名空间式引入：

// 正确的模块化引入示例
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换为你的Firebase配置
const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

将初始化代码放在应用入口（如main.tsx或App.tsx），确保应用启动时优先执行初始化逻辑。

2. 调整Vite的CommonJS依赖处理 #

你的自定义commonjs插件可能未正确覆盖Firebase相关依赖，可修改配置或改用Vite内置优化：

方案A：修改自定义commonjs插件 #

function updateCommonjsPlugin(): import('vite').PluginOption {
  const commonJs22 = commonjs({
    include: [/node_modules/, /firebase/], // 明确包含Firebase相关模块
    extensions: ['.js', '.cjs'],
    strictRequires: true,
  })

  return {
    name: 'new-common-js',
    apply: 'build',
    config: (config) => {
      return {
        ...config,
        plugins: [...(config.plugins || []), commonJs22],
      }
    },
  }
}

方案B：移除自定义插件，改用Vite内置优化 #

export default defineConfig({
  // ...其他配置
  optimizeDeps: {
    include: ['firebase/app', 'firebase/firestore'],
    esbuildOptions: {
      target: 'es2020',
    },
  },
})

3. 验证环境变量注入是否正确 #

如果Firebase配置通过环境变量传入，确保遵循Vite的环境变量规则：

• 变量名必须以VITE_开头，如VITE_FIREBASE_API_KEY
• 代码中通过import.meta.env获取：

  const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    // 其他配置项
  };
  

• 部署时确保GitHub Actions或AWS配置中已正确传入这些环境变量，构建时完成变量替换。

4. 修正静态资源路径配置 #

你的base: ''设置会导致静态资源使用相对路径，部署到AWS后可能出现资源加载失败问题，可根据实际部署路径调整：

export default defineConfig({
  // 如果部署在AWS根路径，设置为"/"
  base: '/',
  // ...其他配置
})

验证步骤 #

1. 本地执行npm run build构建项目
2. 用vite preview预览构建产物，确认控制台无报错
3. 重新通过GitHub Actions部署到AWS，检查浏览器控制台是否恢复正常

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