引用错误：document未定义 - 使用SvelteKit的Firebase AppCheck

Question

我正在尝试将AppCheck添加到我的SvelteKit Web应用程序中，但出现以下错误：

ReferenceError: document is not defined
at makeDiv (C:\Users...\ecomm\node_modules@firebase\app-check\dist\index.cjs.js:1149:24)
at initializeV3 (C:\Users...\ecomm\node_modules@firebase\app-check\dist\index.cjs.js:1094:17)
at ReCaptchaV3Provider.initialize (C:\Users...\ecomm\node_modules@firebase\app-check\dist\index.cjs.js:1294:9)
at _activate (C:\Users...\ecomm\node_modules@firebase\app-check\dist\index.cjs.js:1598:23)
at Proxy.initializeAppCheck (C:\Users...\ecomm\node_modules@firebase\app-check\dist\index.cjs.js:1554:5)
at C:/Users/.../ecomm/src/lib/firebase.ts:23:17
at async instantiateModule (file:///C:/Users/.../ecomm/node_modules/vite/dist/node/chunks/dep-1513d487.js:50330:9)

这与此问题相同，只是不是React而是SvelteKit。

我的集成代码如下：

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const firebaseConfig = { *the app config* };

const app = initializeApp(firebaseConfig);

const appCheck = initializeAppCheck( app, {
   provider: new ReCaptchaV3Provider('*my public key*'),
   isTokenAutoRefreshEnabled: true
});

- Luigi Masdea

Answer 1

如果您或其他人仍然面对此问题，您遇到的错误是由于 SvelteKit 尝试在服务器端运行此代码时文档对象不存在。

要解决此问题，您需要确保 Firebase AppCheck 仅在浏览器（客户端）中初始化。在 SvelteKit 中，您可以利用 $app/environment 模块来检测环境。

以下是您可以修复错误的方法：

1. 更新您的 src/routes/layout.ts 文件：

// src/routes/layout.ts
import { browser } from '$app/environment';
import { initAppCheck } from '$lib/firebase';
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async () => {
    if (browser) {
        initAppCheck();
    }
};

在 $lib/firebase.ts 文件中，确保 Firebase AppCheck 只被初始化一次。

// $lib/firebase.ts

import * as firebase from 'firebase/app';
import {
    ReCaptchaV3Provider,
    initializeAppCheck,
    type AppCheck
} from 'firebase/app-check';

const firebaseConfig = {/* config */};
const app = firebase.initializeApp(firebaseConfig);

let appCheck: AppCheck | null = null;

export function initAppCheck() {
    if (!appCheck) {
        appCheck = initializeAppCheck(
            app, 
            { 
                provider: new ReCaptchaV3Provider(/* key */),
                isTokenAutoRefreshEnabled: true 
            }
        );
    }
}

希望这能帮到你！

- Nathan Tipton