需要 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 旨在在浏览器中运行并期望加载窗口对象，如果您使用的是 SSR（如 next.js），或者更具体地说，如果代码在服务器端而不是在浏览器中运行，它将找不到窗口目的。

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

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

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