如何配置SvelteKit使用Firebase Auth并解决Firebase9的getFirestore导出错误

报错原因 #

该报错由两个核心问题导致：

• Firebase 9的模块化客户端API不支持在SvelteKit默认的服务端渲染（SSR）环境中运行，服务端执行代码时无法正确解析Firebase的导出
• Vite预构建缓存了旧版本的Firebase依赖结构，导致导出匹配失败

具体解决操作 #

1. 清理缓存并重装依赖 #

先删除本地缓存文件和依赖，重新安装确保依赖版本正确：

rm -rf node_modules package-lock.json .vite
npm install

2. 调整Firebase初始化逻辑，仅客户端侧初始化 #

修改firebaseConfig.js，加入客户端环境判断，避免服务端执行初始化逻辑：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { browser } from '$app/environment';

const firebaseConfig = {
    apiKey: 'AIzaSyCAAngD7340_noXs7eesCfE9Y3cwqmiZhU',
    authDomain: 'svelte-todo-20f21.firebaseapp.com',
    projectId: 'svelte-todo-20f21',
    storageBucket: 'svelte-todo-20f21.appspot.com',
    messagingSenderId: '402466412167',
    appId: '1:402466412167:web:c739e7eb86fc5b6ac5ca22',
    measurementId: 'G-2N348J0NTE'
};

let firebaseApp, auth, firestore;

// 仅在浏览器客户端初始化Firebase
if (browser) {
    firebaseApp = initializeApp(firebaseConfig);
    auth = getAuth(firebaseApp);
    firestore = getFirestore(firebaseApp);
}

export { auth, firestore };
export default firebaseApp;

3. 修正svelte.config.js的Vite配置 #

将原来的external配置改为noExternal，同时添加预构建依赖配置：

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        target: '#svelte',
        vite: {
            optimizeDeps: {
                include: ['firebase/app', 'firebase/auth', 'firebase/firestore']
            },
            ssr: {
                noExternal: ['firebase']
            }
        }
    }
};

export default config;

4. 可选：关闭当前页面SSR（优先推荐） #

如果该页面不需要服务端渲染，直接在index.svelte中添加关闭SSR的配置，从根源避免服务端执行代码的问题：

<script context="module">
    export const ssr = false;
</script>

<script>
    import { googleSignIn } from '../auth';
</script>

<button on:click={() => googleSignIn()}>Sign In</button>

5. 给登录逻辑加兜底判断 #

修改auth.js，避免服务端调用时出现未定义错误：

import { auth } from './firebaseConfig';
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';

const googleProvider = new GoogleAuthProvider();

export const googleSignIn = async () => {
    // 服务端未初始化auth，直接跳过执行
    if (!auth) return;
    try {
        const user = await signInWithPopup(auth, googleProvider);
        console.log(user);
    } catch (error) {
        console.error(error);
    }
};

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