javascript - 需要 firebaseUI - 未定义窗口
问题描述
我有一个 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 行,一切都很好。
我应该怎么办?
解决方案
Firebaseui 旨在在浏览器中运行并期望加载窗口对象,如果您使用的是 SSR(如 next.js),或者更具体地说,如果代码在服务器端而不是在浏览器中运行,它将找不到窗口目的。
当我尝试将 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" />;
};
推荐阅读
- ios - @IBAction func 没有同时使用 UILabel 和 UIButton 运行
- node.js - 将 SQL 查询中的数组与 pg 进行比较
- mysql - 在 MySQl 中使用别名时函数无效
- c++ - 移动和旋转二维线
- c++ - 在 Node.js C++ N-API 中迭代 Napi::Object 属性(键)
- depth-first-search - 使用 DFS(深度优先),找到密度超过 %X 的块的密度
- jquery - 使用函数的参数显示消息时遇到问题
- function - 如何在fish shell中使用带有函数的xargs?
- r - lapply 数据框列
- amazon-web-services - 模块化 CloudFormation 资源的主体