不定义需要firebaseUI窗口。

Question

我有一个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行，那就好了。

我该怎么办？

Answer 1

Firebaseui的目的是在浏览器中运行，如果您使用的是窗口对象(如next.js)，或者如果代码在服务器端运行而不是在浏览器中运行，那么它将找不到窗口对象。

当我试图将firebaseui与下一个js集成时，我终于能够使用动态导入来解决这个问题。

在下面找到登录组件的代码，它加载了firebase。

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" />;
};

Answer 2

我也偶然发现了这个问题。MeanMan的回答确实帮助了我，但有两件事需要考虑：

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

最后一个组件如下(使用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;