Svelte Kit配合TypeScript使用Firestore时出现exports is not defined报错如何解决

问题根因 #

该报错由SvelteKit底层的Vite构建器偶发加载了Firestore面向Node.js环境的CommonJS格式产物导致，浏览器原生不支持CommonJS的exports语法，所以抛出引用错误。

解决方案 #

• 步骤1：调整Vite配置，强制指定Firebase相关包的构建规则
  在项目根目录的vite.config.ts中添加如下配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  // 预构建配置，避免加载Node版本的Firestore产物
  optimizeDeps: {
    include: ['@firebase/firestore', 'firebase/firestore'],
    exclude: ['@firebase/firestore/dist/index.node.cjs.js']
  },
  // SSR配置，避免服务端渲染时误处理Firebase客户端包
  ssr: {
    noExternal: ['@firebase/firestore', 'firebase']
  }
});

• 步骤2：补充客户端环境判断，确保Firestore初始化逻辑仅在浏览器侧执行
  你已经将逻辑放在onMount生命周期内，可额外增加SvelteKit内置的browser环境变量判断，避免极端场景下服务端执行该逻辑：

import { browser } from '$app/environment';
import { onMount } from 'svelte';
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  // 替换为你的Firebase项目配置
};

onMount(() => {
  if (!browser) return;
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  // 后续Firestore操作逻辑
});

• 步骤3：清理Vite缓存重启项目
  删除项目node_modules目录下的.vite缓存文件夹，再重新执行npm run dev启动项目即可消除偶发的缓存导致的报错。

• 步骤4：升级Firebase SDK到最新版本
  如果上述操作后仍然报错，可执行npm install firebase@latest升级Firebase SDK，旧版本SDK对ESM构建工具的兼容性较差，升级后可解决大部分兼容问题。

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