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?

Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — Community, Aug 31 '21 at 05:31

score 3 · Answer 1 · answered Aug 30 '21 at 13:08

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 ;)

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

1 Answers1