Firebase Analytics with Next.js - window not defined

Question

I'm trying to implement and export the firebase analytics module in Next.js (firebase v9)

I get the error "ReferenceError: window is not defined" for the following code snippet. All previous functions working great.

Any ideas how to fix this?

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from 'firebase/auth'
import { getFirestore } from '@firebase/firestore'

const firebaseConfig = {
  //...
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const auth = getAuth();
const db = getFirestore(app)

// try to add analytics
const analytics = getAnalytics(app)
export {auth, db, analytics}

Toxicosis

Answer 1

NextJS:

import {initializeApp} from 'firebase/app';
import {getFirestore} from 'firebase/firestore';
import {getAnalytics} from 'firebase/analytics';


const firebaseConfig = JSON.parse(
    process?.env?.FIREBASE_CONFIG ?? '{}',
);

let analytics; let firestore;
if (firebaseConfig?.projectId) {
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

  if (app.name && typeof window !== 'undefined') {
    analytics = getAnalytics(app);
  }

  // Access Firebase services using shorthand notation
  firestore = getFirestore();
}

export {analytics, firestore};

Dantedanton

Answer 2

The version 9 SDK doesn't check for the window object. You will have to implement your own check with something like typeof window !== "undefined".

Ebsen

Answer 3

When using @Adam Beleko's answer, I got this error:

Exporting mutable 'let' binding, use 'const' instead. eslintimport/no-mutable-exports error.

To fix this, I changed it to: const analytics = app.name && typeof window !== 'undefined' ? getAnalytics(app) : null;

Your code with the changed line that fixes the 'window is not defined' error:

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from 'firebase/auth'
import { getFirestore } from '@firebase/firestore'

const firebaseConfig = {
  //...
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const auth = getAuth();
const db = getFirestore(app)

// try to add analytics
const analytics =
  app.name && typeof window !== 'undefined' ? getAnalytics(app) : null;

export {auth, db, analytics}

Etching

I believe this is an ESLint error as opposed to a JS code error. However, it's a great observation and even better that you found a work around. – Dantedanton

@AdamBeleko yeah it was an ESLint error but I still thought it'd be helpful for anyone reading the thread if they're also using ESLint and wanna prevent that error. Seems like good practice anyway to follow what the ESLint rule was saying. – Etching