需要 firebaseUI - 未定义窗口

Posted 2023-02-21

【中文标题】需要 firebaseUI - 未定义窗口

【英文标题】：requiring firebaseUI - window is not defined

【发布时间】：2019-06-09 07:40:22

【问题描述】：

我有一个 JS 文件，我正在尝试使用 Firebase。

这是导致问题的部分（特别是 firebaseUI）

var firebase = require('firebase');
var firebaseui = require('firebaseui');

我没有忘记安装两个：

npm install firebase --save
npm install firebaseui --save

但是当我运行节点时，我得到：

/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/firebaseui/dist/npm.js:30
componentHandler["register"]=componentHandler.register;componentHandler["downgradeElements"]=componentHandler.downgradeElements;window.componentHandler=componentHandler;window["componentHandler"]=componentHandler;
                                                                                                                                ^

ReferenceError: window is not defined
    at /Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/firebaseui/dist/npm.js:30:129
    at Object.<anonymous> (/Users/nimrodshai/Documents/Projects/WeatherJS/node_modules/firebaseui/dist/npm.js:420:460)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/nimrodshai/Documents/Projects/WeatherJS/JS/server.js:8:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

如果我删除 firebaseUI 行，一切都很好。

我该怎么办？

【参考方案1】：

Firebaseui 旨在在浏览器中运行并期望加载 window 对象，如果您使用的是 s-s-r（如 next.js），或者如果代码在服务器端运行而不是更具体，则更具体在浏览器中找不到 window 对象。

我在尝试将firebaseui与next js集成时来到这里，我终于能够使用动态导入解决问题。

在下面找到加载 firebase UI 的 Login 组件的代码。

const LoginFinal = () => 
  useEffect(async () => 
    
    // delay the import until window object is ready
    const firebaseui = await import("firebaseui");
    const ui = new firebaseui.auth.AuthUI(auth);
    ui.start("#firebaseui", 
      signInOptions: [firebaseAuthObject.EmailAuthProvider.PROVIDER_ID],
    );
   
  );

  return <div id="firebaseui" />;
;

【参考方案2】：

我也偶然发现了这个问题。 MeanMan的回答对我很有帮助，但有两点需要考虑：

useEffect 不能接受异步函数，因为它返回一个 useEffect 不支持的承诺。 more info 我们应该考虑到可能已经有一个 AuthUI 实例正在运行，在这种情况下我们不应该创建一个新实例。否则可能会出现错误Error: An AuthUI instance already exists for the key "[DEFAULT]"。 more info

最终组件如下所示（使用 TypeScript）

import React,  FC, useCallback, useEffect  from "react";
import firebase from "firebase";

interface Props 
  firebaseClient: typeof firebase;
  config: firebaseui.auth.Config;


const FirebaseUiLogin: FC<Props> = ( firebaseClient, config ) => 
  const loadFirebaseui = useCallback(async () => 
    const firebaseui = await import("firebaseui");
    const firebaseUi =
      firebaseui.auth.AuthUI.getInstance() ||
      new firebaseui.auth.AuthUI(firebaseClient.auth());
    firebaseUi.start("#firebaseui-auth-container", config);
  , [firebaseClient, config]);

  useEffect(() => 
    loadFirebaseui();
  , []);

  return <div id="firebaseui-auth-container"></div>;
;

export default FirebaseUiLogin;