需要 firebaseUI - 未定义窗口

Posted

技术标签:

【中文标题】需要 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;

【讨论】:

以上是关于需要 firebaseUI - 未定义窗口的主要内容,如果未能解决你的问题,请参考以下文章

Jest.js 强制窗口未定义

未捕获的 ReferenceError:未定义窗口

NextJS Webworker`未定义窗口`

Angular node_modules:正确包含 JQuery 并防止“未定义窗口”错误

NextJS - 未定义窗口

“未定义 Google”错误 - 尝试创建信息窗口 Google 地图