CODEWITHSUNDEEP
reactjsfirebase
Sairam S
Sairam S

Reputation: 469

Module not found: Error: Package path . is not exported from package

import firebase from 'firebase'
 
const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};
  
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
  
export default db;

Error Module not found: Error: Package path . is not exported from package C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase (see exports field in C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase\package.json) Did you mean './firebase'?

Upvotes: 45

Views: 187957

Answers (11)

AJB
AJB

Reputation: 37

You have to just add

import firebase from "firebase/compat/app" // It throws an error (Module not found)
import "firebase/compat/auth" //deafult : It automatically authenticate
import "firebase/compat/firestore" // To access firestore or this throws an error (firestore is not a function)

This is the modification that has been brought from firebase v9 .So , from this and above versions you have to make this changes Here it looks like this :

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

const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};
  
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
  
export default db;

It works for me !

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

Upvotes: 0

Ozay Duman
Ozay Duman

Reputation: 481

Currently, Firebase provides two Web SDK variants. So make sure that you are using the correct version of firebase library. With version 9 firebase library was arranged independent libraries. Your syntax is using firebase version 8. version-8 version-9

Upvotes: 0

Riolite
Riolite

Reputation: 121

In your Firebase config file, set up Firebase as follows:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

// Your web app's Firebase configuration
const config = {
  //your config json file
};


firebase.initializeApp(config);

export const firestore = firebase.firestore();


export default firebase;

In the relevant .js script import Firestore and Firebase as follows:

import {firestore as db}  from './firebase-config' 
import firebase from './firebase-config';

Upvotes: 9

EmrahKolemenoglu
EmrahKolemenoglu

Reputation: 31

It is not working because you are using Firebase version-8 codes in upgraded Firebase version-9 , so if you want to solve your problem you should install Firebase version-8 by using the code below:

npm i [email protected]

Upvotes: 3

Tofazzal haque
Tofazzal haque

Reputation: 569

As in v-9.8.2. Here is the docs link

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";

const firebaseConfig = {};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const firebaseAuth = getAuth(app);
export const fbDatabase = getDatabase(app);
export const fStore = getFirestore(app);
export const fStorage = getStorage(app);

Upvotes: 0

asdacap
asdacap

Reputation: 838

If you use electron-react-boilerplate, in webpack.config.renderer.dev.dll.ts, remove firebase from the entry point. For example:

  entry: {
    renderer: Object.keys(dependencies || {}).filter((it) => it !== 'firebase'),
  },

Upvotes: 16

bangxin
bangxin

Reputation: 1

maybe i meeted the same problem when using webpack. i solved the problem by setting webpack/configuration/resolve/#resolveconditionnames

Upvotes: 0

adedaniel
adedaniel

Reputation: 51

I noticed that I was importing my firebase.ts config file as import db from "firebase" (absolute imports)

The issue here was that webpack was referencing the "firebase" from node_modules, rather than from my firebase.ts. And that's why it threw that error.

I fixed it by importing my firebase configs as import db from "../../firebase", and that worked

Upvotes: 2

Neel gorasiya
Neel gorasiya

Reputation: 155

You have mistaken at const db = firebase.firestore();

It should be const db = firebaseApp.firestore();

Even after doing that you will get error of module not found. You need to import as following

import firebase from 'firebase/compat/app';

import 'firebase/compat/firestore';

This worked for me as I had the same issue!!

Upvotes: 0

Kesava Karri
Kesava Karri

Reputation: 1004

I believe the firebase had lot of updates recently, so you should update the imports this way and it worked liked a charm.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};

// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth, db };

Upvotes: 68

muserref
muserref

Reputation: 361

You should import like below. I see this from the firebase documentation: https://www.npmjs.com/package/firebase

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

const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};

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

export default db;

Upvotes: 7

Related Questions