I am building my first firebase app using JS and Webpack. I'm following the modular approach. I have followed the documentation and forums for this, However I cannot seem to get my imports to work. This is the error I keep getting :
WARNING in ./src/index.js 12:12-25
export 'initializeApp' (imported as 'initializeApp') was not found in 'firebase/app' (possible exports: default)
The import is in Index.js as :
import { initializeApp } from "firebase/app";
I have followed a few tutorials on Youtube, the official documentation step by step, over and over, and forums as well. Kindly help this newbie get started. Any suggestions or advice will be appreciated. Thanks.
I solved the problem changing:
import { initializeApp } from "firebase/app";
to
import firebase from 'firebase/app'
and using
firebase.initializeApp(firebaseConfig);
instead of
initializeApp(firebaseConfig);
Related
I have watched every tutorial and all done all the research possible, yet I keep getting errors for my code. An example error (this error keeps occurring for different part of the code)
In the same file I import import firebase from 'firebase/compat/app' add then const storage = firebase.storage(), in a different file I also import import firebase, {initializeApp} from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore"; I also tried to import firebase/storage but I had the same problem. Any help would be nice, thank you in advance :)
The syntax for the import firebase/storage should be like this:
import firebase from "firebase/compat/app";
// After you import app...
import "firebase/compat/storage";
You may refer to this documentation about compat libraries.
I'm using
"cypress-firebase": "^2.0.0",
"firebase-admin": "^9.11.1"
In my cypress command.js file:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";
import { attachCustomCommands } from "cypress-firebase";
const fbConfig = {
}
firebase.initializeApp(fbConfig);
attachCustomCommands({ Cypress, cy, firebase });
When I try to execute the code, I face the following issue:
TypeError
The following error originated from your test code, not from Cypress:
> Cannot read property 'initializeApp' of undefined
In v9 of the Firebase SDK the API surface changed to using modular, tree-shakeable code. Expect pretty much every piece of documentation or example code you see to have been written for v8 or older Firebase SDK versions that need updating.
Read more about migrating here.
Because cypress-firebase has not yet been updated to support the v9 SDK, you need to import the compatibility SDK instead. Note that the compatibility SDK is deprecated and ideally you should find a package that has been updated to support v9.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/firestore";
import { attachCustomCommands } from "cypress-firebase";
const fbConfig = {
}
firebase.initializeApp(fbConfig);
attachCustomCommands({ Cypress, cy, firebase });
I'm trying to import firebase in a Vue 2 app, but I'm running into this annoying issue.
My imports look like:
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
but when I serve it, I get:
export 'default' (imported as 'firebase') was not found in 'firebase/app'
...and my views don't render or route.
My version of firebase is 9.0.0 off of npm.
Due to release of Firebase SDK Version 9 on 25th August 2021, many users using Firebase Web SDK version 8 are struggling with the same issue.
According to the documentation, Apps currently using Firebase Web SDK version 8 or earlier should consider migrating to version 9 as follows:
Before: version 8 (Old)
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
After: version 9 compat (New)
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Due to Doug Stevenson's suggestion to check my firebase version, I ended up checking firebase's upgrade docs and found this
https://firebase.google.com/docs/web/modular-upgrade
Following the instructions there (changing the paths from firebase/x to firebase/compat/x) fixed my issue perfectly. Thank you all, and I hope any other clueless folk like myself confused by the new format can be helped by this post.
According to firebase documents: Update imports to v9 compat. In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the “compat” version of each import.
For example:
Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import "firebase/database";
import "firebase/storage";
After: version 9 compat
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
adding /compat for that three lines worked on my react project
import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore';
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
After upgrading to 8.0.0, I get the following error:
Attempted import error: 'initializeApp' is not exported from 'firebase/app' (imported as 'firebase').
My import looks like this:
import * as firebase from "firebase/app"
firebase.initializeApp({ ... })
TypeScript also complains:
Property 'initializeApp' does not exist on type 'typeof import("/path/to/my/file")'. ts(2339)
How do I fix this?
In version 8.0.0, the Firebase SDK had a breaking change in the way it handles exports:
Breaking change: browser fields in package.json files now point to ESM
bundles instead of CJS bundles. Users who are using ESM imports must
now use the default import instead of a namespace import.
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Code that uses require('firebase/app') or require('firebase') will
still work, but in order to get proper typings (for code completion,
for example) users should change these require calls to
require('firebase/app').default or require('firebase').default. This
is because the SDK now uses typings for the ESM bundle, and the
different bundles share one typings file.
So, you will have to use the new ESM bundle default export:
import firebase from "firebase/app"
firebase.initializeApp({ ... })
If you are working with SDK version 9.0, read this question instead:
How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."
old way to import firebase : import * as firebase from "firebase/app";
New way to import in 8.0.0 version : import firebase from "firebase/app"
eg: the way i did it. Only the first 2 lines are relevant, the other lines are only added as apart of my code but its quite general tbh!
import firebase from "firebase/app"
import "firebase/auth"
const firebaseConfig = {
apiKey: XXXX,
authDomain: XXX,
projectId: XXXX,
storageBucket: XXXX,
messagingSenderId: XXXX,
appId: XXXX,
}
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
}
export const auth = firebase.auth()
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
replace XXXX by ur data, just being clear :)
try using this for firebase 9 above
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
or you can read more on: https://firebase.google.com/docs/web/modular-upgrade
If you are using auth you need to import seperately as:
import 'firebase/auth';
As you are not importing everything like '* as firebase'.
Its an update issue, while you can fix how you import firebase, you can't fix how it's imported imported in libraries you use, you'll have wait for those library to be updated
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Library's like FirebaseUI authentication have not been updated, and I've been waiting for FirebaseUI update since april
https://stackoverflow.com/a/66708552/12490386
tip from my own mistakes: make sure all spellings are correct, and try using this 😁import firebase from 'firebase'
This is the new firebase 9 updates :
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
I solved my problem using this kind of 'import' approach in firebase version 9.6.1 :
import "firebase/auth"
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyBbaKxbqufRCfrwGpQ3sfuBgIifIhTCP1A",
authDomain: "facebook-clone-f4994.firebaseapp.com",
projectId: "facebook-clone-f4994",
storageBucket: "facebook-clone-f4994.appspot.com",
messagingSenderId: "593047789391",
appId: "1:593047789391:web:11459d7b291b9465542f3a",
measurementId: "G-FNW1K23DBJ"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, provider };
export default db;
I had faced a similar problem while trying to use Firebase authentication in an old site.
This solved the problem:
npm uninstall firebase step
npm install firebase
I solved similar problem for firebase version > 9, by using in the route:
/compat/
Eg:
import firebase from "firebase/compat/app";
2021 update:
Firebase v9 comes with new API designed to facilitate tree-shaking (removal of unused code). This will make your web app as small and fast as possible.
The /compat packages are created for compatibility and to make the upgrade to the modular API easier. With the downside of not getting the performance perks. To get the performance benefits of the modular design, use getApps instead:
import { getApps, initializeApp } from 'firebase/app';
if (!getApps().length) {
initializeApp({
// your config
});
}
From the library's JSDoc: getApps return A (read-only) array of all initialized apps..
There is also a getApp function that When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.
Version 9 provides a set of compat packages that are API compatible with Version 8. They are intended to be used to make the upgrade to the modular API easier by allowing you to upgrade your app piece by piece. See the Upgrade Guide for more detail.
To access the compat packages, use the subpath compat like so:
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Encountered a very weird issue. When trying to import firebase, I got the following error:
./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').
The structure of my project is: A parent folder containing a react client folder. I installed firebase in the parent folder, initialize a firebase app in the firebaseConfig file in the parent folder, and then import it into the react client folder.
I later tried installing firebase in the react client folder and import firebase in it. Weirdly, after I installed firebase in the client folder, doing "npm ls firebase" in the client folder returns empty, even though firebase is indeed in the node modules and package.json in the client folder. I am wondering what caused the problem.
firebaseConfig.js in the parent folder
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = {
......
};
firebase.initializeApp(firebaseConfig);
export default firebase;
Unfortunately, you've upgraded your "firebase" dependency to 8.0.0 but the "firebaseui" dependency doesn't support it yet. You will have to temporarily downgrade firebase to version 7.24.0 until firebaseui supports the breaking changes in 8.0.0.
Its an update issue, while you can fix how you import firebase, you can't fix how it's imported imported in libraries you use, you'll have wait for those library to be update.
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Library's like FirebaseUI authentication
Firebase version I was using Firebase>8.0.0 Line of code I was using import * as firebase from 'firebase/app'; this import works for Firebase<8.0.0 Please go and use this import firebase from 'firebase/app'; if you are using firebase>8.0.0 as of now (4th Aug 2021) things might change on later versions. This is because you are using the wrong line of code, nothing wrong with the system. Go and check the package.json file on your project folder.
Check here package.json
Checking firebase version on package.json file
When I installed firebase, by default it has installed the version of 9.0.0. And I see the mentioned error but when I changed it to 8.9.1 and imported it as below it worked for me.
import firebase from 'firebase/app'
First determine your firebase version:
firebase --version
If you are using version 9, replace this line
import firebase from "firebase/app"
with
import firebase from 'firebase/compat/app'
Reference:
https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/