Nuxt.js SSR 与 firebase - ReferenceError：导航器未定义

Question

I've made a simple web app with Nuxt(SSR) and firebase(firestore and hosting). It has some pages like index, about, contact and text editor.
When I do npm run build , it works with no problem. But for npm run generate , it has an error message like:

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

This message actually has been showing up occasionally when I run the app in dev mode and it usually disappeared when I refresh.
Here's what I did to fix it:

1. Delete the node_module folder and the dependencies that I don't use eventually in package.json file and npm install again. I even deleted the firebase-related files and folder and re-install firebase tools and init again.
2. At first the error message showed up only for /about page and any other pages are alright so I deleted the about page - and then the error shows up again for another page.
3. Before #2, I thought this error occurs because only about page has no. I did some research and figured out that it's because the page is client-side only or server-side only blah blah...so I added some script code on purpose but it didn't work too.

I looked up dozens of articles on here or other forums, and none of it actually helps to figure out what I'm doing wrong.
This problem seems related to node or server-side things, but I'm quite new to Vue and also Node, so I couldn't fully understand what I have to do and where I should modify the code.
BTW my node is the latest LTS version and vue, nuxt, and all the dependencies are the latest versions as well.
Thanks in advance.

Answer 1

Hey dont know if this helps, I ran into the same issue using NextJs. Here is how I solved it. I wasnt using it in any of my SSR code either though so idk what happened.

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

Then in your code to use it

analytics().logEvent();