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 });
Related
I'm trying to implement adding images feature in my react project with usage of firebase storage.
This is the error:
Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_3__.default.storage is not a function.
This error occurs in firebase configuration file. I used firebase firestore in this project for adding new blogs, and I was adding images through url and everything worked just fine.
Here are my imports:
import firebase from 'firebase/compat/app';
import "firebase/storage"
And instance of storage
export const storage = firebase.storage()
When using the compatibility library, make sure that all components are imported from the compatibility library.
import firebase from 'firebase/compat/app';
import "firebase/compat/storage";
// ^^^^^^
The compatibility library is for supporting legacy code. For all new code, you should be using the modern Modular SDK because the legacy Namespaced SDK is deprecated. See the upgrade guide for details.
If you are an expo user importing firebase from compat/storage solves the issue
import firebase from 'firebase/compat/app';
In my React Native app, I am trying to use the Firebase JS SDK with Expo as mentioned in this guide, although after installing the dependencies via expo install firebase, I am unable to import modules from firebase/auth. Calling the respective methods like getAuth() results in the following error:
TypeError: (0, _auth.getAuth) is not a function. (In '(0, _auth.getAuth)()', '(0, _auth.getAuth)' is undefined)
I am also unable to import modules from firebase/database, firebase/firestore etc.
My project is set up using Typescript, but I also experienced this problem with a JS-only project.
I am able to import firebase from firebase/app, but not the respective modules:
edit: I am using getAuth() and the other methods in the following context:
React.useEffect(() => {
if (response?.type === "success") {
const { id_token } = response.params;
const auth = getAuth();
const provider = new GoogleAuthProvider();
const credential = provider.credential(id_token);
signInWithCredential(auth, credential);
}
}, [response]);
I am using Firebase 8.2.3.
The import syntax you're using is for Firebase SDK version 9 and later. For version 8 and below, use:
import firebase from 'firebase/app';
import 'firebase/auth';
...
And then use the v8 syntax as shown here.
unfortunatly latest expo sdk is not compatible with firebase9 and if you use this version of firebase you see tones of odd error use firebase version 8
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/