I'm starting to create my web app with next.js, so I import firebase from "firebase". then this error occur in the terminal:

Question

I'm building a next.js web app and I want to use firebase for database and authentication. when I import firebase in a file this error occurs:

error - ./firebase.js:1:0
Module not found: Package path . is not exported from package /home/naveen/New Folder/whatsapp-2/node_modules/firebase (see exports field in /home/naveen/New Folder/whatsapp-2/node_modules/firebase/package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
> 1 | import firebase from "firebase";
  2 | 
  3 | const firebaseConfig = {
  4 |   apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",

Import trace for requested module:
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

this is my firebase.js file:

import firebase from "firebase";

const firebaseConfig = {
  apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",
  authDomain: "whatsapp-2-b5a79.firebaseapp.com",
  projectId: "whatsapp-2-b5a79",
  storageBucket: "whatsapp-2-b5a79.appspot.com",
  messagingSenderId: "960710517268",
  appId: "1:960710517268:web:42e2b65fd273553966fd01",
};

const app = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

const db = app.firestore();
const auth = app.auth();

const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

this is package.json file:

{
  "name": "whatsapp-2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "email-validator": "^2.0.4",
    "firebase": "^9.0.0",
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0"
  }
}

here is exports field in package.json in node_modules.firebase :

{  "exports": {
    "./analytics": {
      "node": {
        "require": "./analytics/dist/index.cjs.js",
        "import": "./analytics/dist/index.mjs"
      },
      "default": "./analytics/dist/index.esm.js"
    },
    "./app": {
      "node": {
        "require": "./app/dist/index.cjs.js",
        "import": "./app/dist/index.mjs"
      },
      "default": "./app/dist/index.esm.js"
    },
    "./app-check": {
      "node": {
        "require": "./app-check/dist/index.cjs.js",
        "import": "./app-check/dist/index.mjs"
      },
      "default": "./app-check/dist/index.esm.js"
    },
    "./auth": {
      "node": {
        "require": "./auth/dist/index.cjs.js",
        "import": "./auth/dist/index.mjs"
      },
      "default": "./auth/dist/index.esm.js"
    },
    "./auth/cordova": {
      "node": {
        "require": "./auth/cordova/dist/index.cjs.js",
        "import": "./auth/cordova/dist/index.mjs"
      },
      "default": "./auth/cordova/dist/index.esm.js"
    },
    "./auth/react-native": {
      "node": {
        "require": "./auth/react-native/dist/index.cjs.js",
        "import": "./auth/react-native/dist/index.mjs"
      },
      "default": "./auth/react-native/dist/index.esm.js"
    },
    "./database": {
      "node": {
        "require": "./database/dist/index.cjs.js",
        "import": "./database/dist/index.mjs"
      },
      "default": "./database/dist/index.esm.js"
    },
    "./firestore": {
      "node": {
        "require": "./firestore/dist/index.cjs.js",
        "import": "./firestore/dist/index.mjs"
      },
      "default": "./firestore/dist/index.esm.js"
    },
    "./firestore/lite": {
      "node": {
        "require": "./firestore/lite/dist/index.cjs.js",
        "import": "./firestore/lite/dist/index.mjs"
      },
      "default": "./firestore/lite/dist/index.esm.js"
    },
    "./functions": {
      "node": {
        "require": "./functions/dist/index.cjs.js",
        "import": "./functions/dist/index.mjs"
      },
      "default": "./functions/dist/index.esm.js"
    },
    "./messaging": {
      "node": {
        "require": "./messaging/dist/index.cjs.js",
        "import": "./messaging/dist/index.mjs"
      },
      "default": "./messaging/dist/index.esm.js"
    },
    "./messaging/sw": {
      "node": {
        "require": "./messaging/sw/dist/index.cjs.js",
        "import": "./messaging/sw/dist/index.mjs"
      },
      "default": "./messaging/sw/dist/index.esm.js"
    },
    "./performance": {
      "node": {
        "require": "./performance/dist/index.cjs.js",
        "import": "./performance/dist/index.mjs"
      },
      "default": "./performance/dist/index.esm.js"
    },
    "./remote-config": {
      "node": {
        "require": "./remote-config/dist/index.cjs.js",
        "import": "./remote-config/dist/index.mjs"
      },
      "default": "./remote-config/dist/index.esm.js"
    },
    "./storage": {
      "node": {
        "require": "./storage/dist/index.cjs.js",
        "import": "./storage/dist/index.mjs"
      },
      "default": "./storage/dist/index.esm.js"
    },
    "./compat/analytics": {
      "node": {
        "require": "./compat/analytics/dist/index.cjs.js",
        "import": "./compat/analytics/dist/index.mjs"
      },
      "default": "./compat/analytics/dist/index.esm.js"
    },
    "./compat/app": {
      "node": {
        "require": "./compat/app/dist/index.cjs.js",
        "import": "./compat/app/dist/index.mjs"
      },
      "default": "./compat/app/dist/index.esm.js"
    },
    "./compat/app-check": {
      "node": {
        "require": "./compat/app-check/dist/index.cjs.js",
        "import": "./compat/app-check/dist/index.mjs"
      },
      "default": "./compat/app-check/dist/index.esm.js"
    },
    "./compat/auth": {
      "node": {
        "require": "./compat/auth/dist/index.cjs.js",
        "import": "./compat/auth/dist/index.mjs"
      },
      "default": "./compat/auth/dist/index.esm.js"
    },
    "./compat/database": {
      "node": {
        "require": "./compat/database/dist/index.cjs.js",
        "import": "./compat/database/dist/index.mjs"
      },
      "default": "./compat/database/dist/index.esm.js"
    },
    "./compat/firestore": {
      "node": {
        "require": "./compat/firestore/dist/index.cjs.js",
        "import": "./compat/firestore/dist/index.mjs"
      },
      "default": "./compat/firestore/dist/index.esm.js"
    },
    "./compat/functions": {
      "node": {
        "require": "./compat/functions/dist/index.cjs.js",
        "import": "./compat/functions/dist/index.mjs"
      },
      "default": "./compat/functions/dist/index.esm.js"
    },
    "./compat/messaging": {
      "node": {
        "require": "./compat/messaging/dist/index.cjs.js",
        "import": "./compat/messaging/dist/index.mjs"
      },
      "default": "./compat/messaging/dist/index.esm.js"
    },
    "./compat/performance": {
      "node": {
        "require": "./compat/performance/dist/index.cjs.js",
        "import": "./compat/performance/dist/index.mjs"
      },
      "default": "./compat/performance/dist/index.esm.js"
    },
    "./compat/remote-config": {
      "node": {
        "require": "./compat/remote-config/dist/index.cjs.js",
        "import": "./compat/remote-config/dist/index.mjs"
      },
      "default": "./compat/remote-config/dist/index.esm.js"
    },
    "./compat/storage": {
      "node": {
        "require": "./compat/storage/dist/index.cjs.js",
        "import": "./compat/storage/dist/index.mjs"
      },
      "default": "./compat/storage/dist/index.esm.js"
    }
  },
}

I have done:

yarn add firebase

What have I done wrong?

Answer 1

First of all the default export of the firebase SFK is coming from firebase/app and not just firebase

Next, you are using the firebase SDK V9, that has just been release few days ago and you have some issues to solve about that :

• the package you are using named 'react-firebase-hooks` is not supporting the firebase V9, indeed the PR is still open on their github here
• With this new version of the SDK, things are a little bit different and i suggest you to follow this guide
• Last, if you want to stick with the v8 syntaxe you can do things exactly like you were doing it when using the SDK v8 just add compat inside all of your imports, like so:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

Happy to help ;)

Answer 2

如果您仍然没有修复它，请告诉我，但我向您保证会这样做请点击此链接，并仔细阅读