I want to initialize firebase emulator with the best practice I found on those docs. but after days of trying ,still got:

@firebase/firestore: Firestore (7.12.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

I have double checked my env variables, I am working fine without emulator.

here is my code, what I'm I doing wrong?

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";
import "firebase/functions";
import "firebase/analytics";
import { isServer } from "../../utils/utils";

const config = {
  apiKey: process.env.NEXT_PUBLIC_FB_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FB_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FB_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FB_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FB_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FB_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FB_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FB_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
  console.log("firebase init");
}

if (!isServer) {
  firebase.analytics();
}
const auth = firebase.auth();
const db = firebase.firestore();
const storage = firebase.storage();
const storageRef = storage.ref();
const firebaseFunc = firebase.app().functions();

if (!isServer && location.hostname === "localhost") {
  db.settings({
    host: "http://localhost:8080",
    ssl: false,
    experimentalForceLongPolling: true,
  });

  firebaseFunc.useFunctionsEmulator("http://localhost:5001");
  window.auth = auth;

  console.log("emualtor settings done.");
}
export { auth, db, storage, storageRef, firebaseFunc };
export default firebase;