Module not found: Package path . is not exported from package / Firebase won't update in next.js app

Question

I am working on a Next.js app that pulls in data from a Firebase collection. While connecting the Firebase database, I am encountering the following error:

Failed to compile. Module not found

This seems to come from the config.js file with the firebase credentials. It is located here: root > src > firebase > config.js

When I run npm firebase -v I get that the version installed is 8.19.2 However, the package.json states that it's ^9.8.0 When I try to update firebase, it won't do anything.

The config file looks like this:

import firebase from 'firebase'; 
import { initializeApp } from 'firebase-admin';
import { getFirestore } from 'firebase/firestore';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  export default db;

The package.json file looks like this:

{
  "name": "with-redux-toolkit",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "@reduxjs/toolkit": "1.5.0",
    "@stripe/react-stripe-js": "^1.11.0",
    "@stripe/stripe-js": "^1.44.1",
    "@tailwindcss/line-clamp": "^0.2.0",
    "axios": "^1.1.3",
    "currency": "^4.1.0",
    "firebase": "^9.8.0",
    "firebase-admin": "^9.12.0",
    "micro": "^9.4.1",
    "moment": "^2.29.4",
    "next": "^13.0.3",
    "next-auth": "^4.16.4",
    "react": "^18.2.0",
    "react-currency-format": "^1.1.0",
    "react-dom": "^18.2.0",
    "react-redux": "7.2.2",
    "react-responsive-carousel": "^3.2.23",
    "stripe": "^10.17.0"
  },
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.15",
    "tailwindcss": "^2.1.2"
  }
}

Does someone have any idea of what could be happening?

Thanks in advance.

Answer 1

You use "firebase": "^9.8.0", in your project. Try to use official docs instruction for firebase 9 or second reference from npm about firebase 9 and :

Firebase 9 docs :

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

---

Npm second reference:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

---

Your config.js should looks like:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };


const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export default db;

---

This command :

npm firebase -v 

Gets You npm current version :-P

To properly check the firebase version on Your machine You need to install it globally ! reference : https://firebase.google.com/docs/cli#install-cli-mac-linux

Then you can check the version:

firebase --version