Firebase V9: export 'default' not found in my Firebase loader - reactjs

I am working on a React project with Firebase (^9.6.7) and while I am configuring the Firebase database it shows such an error:
Compiled with problems: ERROR in ./src/App.js 28:4-17
export 'default' (imported as 'db') was not found in './firebase' (possible exports: auth, db, storage)
// in firebase.js
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseApp = firebase.initialzeApp({
apiKey: "AIzaSyCAxk5u3dc69u-OeGuQfR8IZYoj3dr1Kxo",
authDomain: "myinstagram-clone-fb535.firebaseapp.com",
projectId: "myinstagram-clone-fb535",
storageBucket: "myinstagram-clone-fb535.appspot.com",
messagingSenderId: "1061340472237",
appId: "1:1061340472237:web:d0b42559484d699a85b724",
measurementId: "G-9H2TSBPRSK"
});
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export { db, auth, storage }
// in app.js
import db from './firebase' // <- error here

You have no export default XXXX statement in your code.
To correctly import the db object you exported using
export { db, auth, storage }
you must use
import { db } from './firebase'

Related

Package path . is not exported from package [duplicate]

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'?
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 };
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;
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';
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'),
},
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 firebase#8.2.3
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
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!!
maybe i meeted the same problem when using webpack.
i solved the problem by setting webpack/configuration/resolve/#resolveconditionnames
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);
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

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'?
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 };
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;
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';
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'),
},
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 firebase#8.2.3
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
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!!
maybe i meeted the same problem when using webpack.
i solved the problem by setting webpack/configuration/resolve/#resolveconditionnames
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);
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

Attempted import error: 'XhrIoPool' is not exported from '#firebase/webchannel-wrapper'

I installed firebase version 4.6.2. When I try to set up the firebase config I got this error. Can anyone help me with this.
Note: I set up the database config on the firebase website and everything fine.
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const firebaseConfig = {
apiKey: "key",
authDomain: "project.firebaseapp.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "1234",
appId: "appid",
};
// Initialize the app
firebase.initializeApp(firebaseConfig);
// Exporting the authentication(auth) and the database (firestore)
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const provider = new firebase.auth.GoogleAuthProvider();
export default firebase;

how to solve Error: Cannot instantiate firebase-messaging.js - be sure to load firebase-app.js first. in react app

I had this config which was working perfectly but when I added firebase-messaging it throws an error that firebase-app.js has to be loaded first
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/database";
import "firebase/storage";
import "firebase/functions";
import "firebase/firebase-messaging"; ---> adding this line brings the error
var config = {
apiKey: "AIzaSyCrlr_yryEFERGXizzrjoPTB7biow",
authDomain: "123.firebaseapp.com",
databaseURL: "https://123.firebaseio.com",
projectId: "123",
storageBucket: "123.appspot.com",
messagingSenderId: "5025880",
appId: "1:30029661880:web:b5363d4ecddf3c32e4d64d",
measurementId: "G-DUJNZERGRQ",
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
export default firebase;
export const auth = firebase.auth();
export const db = firebase.firestore();
export const database = firebase.database();
export const storage = firebase.storage();
export const functions=firebase.functions();
export const messaging = firebase.messaging();
everything else was working before, auth, firestore, everything. I have tried adding import "firebase/firebase-app" at the top but this still does not work.
I have also upgraded the firebase sdk to the latest 7.15.4 just to be sure it's not a previous sdk bug.
What am I doing wrong
Turns out I was importing the wrong script.
It should not be import "firebase/firebase-messaging";
This is what should be imported
import "firebase/messaging";

firebase.initializeApp is not a function

I'm trying to make a site in React, and I have added the Firebase library using npm i firebase --save
I am then trying to call this in my app, but I am not having much joy:
import * as firebase from "firebase";
const instance = firebase.initializeApp({
apiKey: '123',
authDomain: 'https://123.firebaseapp.com/',
databaseURL: 'https://123.firebaseio.com/'
});
export default instance;
No matter what I try, it throws:
firebase.initializeApp is not a function
I've checked its in my node_modules and i've reinstalled it, but I still have no such luck.
Any suggestions?
I had a the same problem with firestore in my Vue application.
I eventually came right by doing the following in my firebase.js file:
import { firebase } from '#firebase/app'
As opposed to :
import * as firebase from 'firebase/app'
Also if you are using any specific firebase modules you need to import them individually like so:
import '#firebase/auth'
import '#firebase/firestore'
const db = firebase.firestore()
const auth = firebase.auth()
export { db, auth }
Hope this helps somebody.
This is how I solved this
import firebase from "firebase";
const firebaseConfig = {
apiKey: "Api Key",
authDomain: "Domain",
databaseURL: "URL",
projectId: "ID",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
export default db;
Can you please try with:
var firebase = require('firebase/app');
Credits.
Been having a similar issue with firebase v4.12.1 throwing error of initializeApp not being a function. I solved it by switching to using #firebase/app 0.1.10 npm package instead.
import { firebase } from '#firebase/app';
Using it in a next.js v5.1.0 project.
been having the same problem but in VUE, in case it works i solved importing each element separately
// This import loads the firebase namespace.
import firebase from 'firebase/app';
// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
import 'firebase/storage';
Hope can help ;)
This is the new firebase SKD modular recommendation. Avoid using the
import firebase from 'firebase/app';
and try to use modular import, such as:
import {initializeApp} from "firebase/app";
const instance = {
apiKey: '123',
authDomain: 'https://123.firebaseapp.com/',
databaseURL: 'https://123.firebaseio.com/'
};
export const app = initializeApp(instance);
references
https://firebase.google.com/docs/web/learn-more#modular-version
const auth = firebase.auth()
export { db, auth }`import * as firebase from "firebase";
require("#firebase/firestore");
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase.firestore();

Resources