NextJS/Firebase - implementing firebase analytics throw error: Missing App configuration value-CodePudding

i am using Next JS 13 with default pages directory and i use database for my project. Everything works fine, until i started to implementing firebase analytics.

First it throwed that window is undefiend. I solved it by checking window. After that it worked so i wanted to test logEvent() function in my index.js page.

And it throw FirebaseError: Installations: Missing App configuration value: "projectId" (installations/missing-app-config-values).

I tried to use proccess.env.NEXT_PUBLIC but it didnt worked.

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


const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const analytics = typeof window !== 'undefined' ? getAnalytics(app) : null;
export default app;

Index.js example

<Button
key={`${name}_${index}`}
href={url}
mouseEnter={() => selectedImg !== img && handleMouseEnter(img)}
customStyles={'py-5 bg-primary-blue/60'}
onClick={() => (analytics ? logEvent(analytics, name) : {})}
>  Test </Button>

Have someone similiar problem and solved it?

CodePudding user response：

As the error says, the 'appId' is missing in your config object. You could try to copy it again in the Firebase Console to make sure you're using the updated one.