带有 Firebase 的 Nuxt.js s-s-r - ReferenceError：未定义导航器

Posted 2023-02-22

【中文标题】带有 Firebase 的 Nuxt.js s-s-r - ReferenceError：未定义导航器

【英文标题】：Nuxt.js s-s-r with firebase - ReferenceError: navigator is not defined

【发布时间】：2021-04-24 01:05:33

【问题描述】：

我使用 Nuxt(s-s-r) 和 firebase（firestore 和托管）制作了一个简单的网络应用程序。它有一些页面，如索引、关于、联系和文本编辑器。 当我做npm run build 时，它可以正常工作。 但是对于npm run generate，它有如下错误信息：

ReferenceError: navigator is not defined
at Object.areCookiesEnabled (C:\app\node_modules\@firebase\util\dist\index.node.cjs.js:656:5)
at warnOnBrowserContextMismatch (C:\app\node_modules\@firebase\analytics\dist\index.cjs.js:1072:15)
at factory (C:\app\node_modules\@firebase\analytics\dist\index.cjs.js:1086:5)
at Component.instance.INTERNAL.registerComponent.component.Component.setServiceProps.settings [as instanceFactory] (C:\app\node_modules\@firebase\analytics\dist\index.cjs.js:1165:16)
at Provider.getOrInitializeService (C:\app\node_modules\@firebase\component\dist\index.cjs.js:222:39)
at Provider.getImmediate (C:\app\node_modules\@firebase\component\dist\index.cjs.js:120:33)
at FirebaseAppImpl._getService (C:\app\node_modules\@firebase\app\dist\index.node.cjs.js:230:49)
at FirebaseAppImpl.firebaseAppImpl.<computed> [as analytics] (C:\app\node_modules\@firebase\app\dist\index.node.cjs.js:442:39)
at Object.serviceNamespace [as analytics] (C:\app\node_modules\@firebase\app\dist\index.node.cjs.js:422:45)
at Object.<anonymous> (plugins/firebase.js:22:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module.<anonymous> (server.js:2766:16)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (server.js:639:18)
at __webpack_require__ (webpack/bootstrap:25:0)
at server.js:118:18

实际上，当我在开发模式下运行应用程序时，此消息偶尔会出现，而当我刷新时，它通常会消失。 这是我为修复它所做的：

再次删除 package.json 文件和npm install 中我最终不使用的 node_module 文件夹和依赖项。我什至删除了与 firebase 相关的文件和文件夹，并重新安装了 firebase 工具并再次初始化。 起初，错误消息仅出现在 /about 页面，其他任何页面都正常，因此我删除了 about 页面 - 然后错误再次出现在另一个页面。 在 #2 之前，我认为会发生此错误，因为只有 about 页面没有 .我做了一些研究，发现这是因为页面只是客户端或服务器端等等等等……所以我故意添加了一些脚本代码，但它也不起作用。

我在此处或其他论坛上查找了数十篇文章，但实际上没有一篇有助于找出我做错了什么。 这个问题似乎与节点或服务器端的事情有关，但我对 Vue 和 Node 都很陌生，所以我无法完全理解我必须做什么以及应该在哪里修改代码。 顺便说一句，我的节点是最新的 LTS 版本，而 vue、nuxt 和所有依赖项也是最新版本。 提前致谢。

【参考方案1】：

嘿，不知道这是否有帮助，我在使用 NextJs 时遇到了同样的问题。这是我解决它的方法。我也没有在我的任何 s-s-r 代码中使用它，但我不知道发生了什么。

const analytics = (): firebase.analytics.Analytics => firebase.analytics();

然后在你的代码中使用它

analytics().logEvent();

【讨论】：

这有助于部署功能。但是通过https调用调用函数时问题仍然存在