I am using Webpack with firebase and firebase-admin.
To install firebase I ran:
npm install --save firebase
I am importing firebase using:
import * as firebase from 'firebase/app'
import 'firebase/auth'
I also tried:
import * as firebase from 'firebase'
And I tried:
const firebase = require('firebase')
As suggested in web get started guide.
However, when I try to use firebase.auth() I get an error:
console.js:32 TypeError: firebase.auth is not a function
When I use the debugger to inspect firebase I see that it in fact does not have an auth function:
> firebase
{__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}
How can I get auth() included as a function using webpack?
I fixed this by deleting my node_modules directory and reinstalling everything.
Also I'm importing firebase like so:
import firebase from 'firebase'
require('firebase/auth')
The problem wasn't with the node_modules, it was with the way that you were importing the component.
When you export a component ES6 way, you normally do export default () => { console.log('default component export'); };
default is the keyword here, when you import a component ES6 way like import firebase from 'firebase' it's grabbing the default property from the exported object.
Keeping in mind the above example, here's what you've done wrong.
Using ES6:
import * as firebase from 'firebase'
console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function
Using ES5:
var firebase = require('firebase')
console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function
Note the .default
I kept getting an error that said
"TypeError: firebase.auth is not a function"
I got the auth object to appear and the thing I did differently was install the modules in a different order.
The first time I installed the modules (this is when the auth object wasn't appearing):
// this seems to confuse things with the auth object when installed in this order
$ npm install firebase-admin --save
$ npm install firebase --save
I deleted the npm folder and started from scratch although this time I reversed the installation order:
// for some reason this worked and now I can access the auth object
$ npm install firebase --save
$ npm install firebase-admin --save
I didn't do anything else. I simply reversed the installation order by installing firebase first and firebase-admin second.
I hope this works for other people.
You can read more about it here
just add >
import firebase from '#firebase/app';
require('firebase/auth');
into your project
this is the import statement from official docs:
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// Add the Firebase products that you want to use
import "firebase/auth";
console.log(firebase.auth);
These also seem to work if you only want auth:
Edit: The code below worked with Firebase 7 package but not any more with version 8. It will change again for Firebase 9. Just stick to the docs and you will be fine.
import { auth } from "firebase/app";
import "firebase/auth";
console.log(auth);
or
import { auth } from "firebase";
console.log(auth);
Though there are many root causes behind this issue, a simple one like this also could be the case.
I forgot to include the js files for auth and db although I use them inside the JS code.
Before the fix;
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>
After the fix;
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-database.js"></script>
You just need to use the import as following
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
in the above case, both auth and DB services are being used.
For any other service, you need to import like that only.
This is because firebase-auth script is not added.
First you have to install npm files in your node modules by
npm install firebase --save
npm install firebase-admin --save
Then you have to add the script of firebase.auth after firebase-app script and make sure the version is same.
Before fix:
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
AFTER FIX YOU NEED TO ADD BOTH THE SCRIPT AND AFTER THIS ADD YOUR FIREBASE ACCOUNT SCRIPT AS FOLLOWS
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
THEN IT SHOULD WORK FINE
The main reason for this error could be due to the latest Firebase version v9.1.1, in this version the Firebase imports have been changed.
Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Check docs here: https://firebase.google.com/docs/web/modular-upgrade
With firebase v9 you can not use auth like that anymore. Instead of that you need to import auth from "firebase/auth" like:
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
and if you need to export auth object
const auth = getAuth();
export { auth };
if you need to use createUserWithEmailAndPassword function
createUserWithEmailAndPassword(auth, email, password)
You can check the official documentation for more
https://www.npmjs.com/package/firebase
When running in Node and needing both firebase and firebase-admin this works for me:
First install firebase and then firebase-admin in that order.
Then use as so:
const app = require('#firebase/app');
require('#firebase/auth');
require('#firebase/firestore');
const firebase = app.firebase
firebase.initializeApp({…})
const auth = firebase.auth()
const db = firebase.firestore()
Firebase 8 introduced some breaking changes.
https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020
Now you can make it work like this if you use .default:
const firebase = require('firebase/app').default
require('firebase/auth')
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
}
const auth = firebase.auth()
In Firebase V9's JS SDK, thanks to Typescript, what I did is below:
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
async login = (email: string, password: string) => {
await signInWithEmailAndPassword(getAuth(), email, password)
}
I ran into this as well. My issue was the npm module #firebase was installed as well as the firebase module. When I required firebase in my JavaScript code with ‘require(“firebase”)’, webpack bundled #firebase instead for some reason.
#firebase doesn’t include auth, database etc. by default...it’s modular so you can require them separately. Consequently I received the above error when I tried calling auth().
To fix it you can remove #firebase...or just add the full path to the correct firebase when you require it like
require(‘/path/to/node_modules/firebase/firebase.js’)
Had the same issue, I think it's because of versions troubles.
I solve it by deleting node_modules and all webpack generated stuff and take versions from here.
Btw, I think it's very strange behavior, because it should work like in official documentation.
I ran into the same problem. However I didn't have to do any deletion of any files, just correct the import statements. In my case I use Firebase version 7.7.0 in an Gatsby/React app and this is what the import looks like:
import React from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';
const config = {
apiKey: process.env.GATSBY_FIREBASE_API_KEY,
authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.GATSBY_FIREBASE_DATABASE_URL,
projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID,
};
class Firebase {
constructor() {
firebase.initializeApp(config);
this.auth = firebase.auth();
this.uiConfig = {
signinOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
],
};
}
}
export default Firebase;
const FirebaseContext = React.createContext(null);
export { FirebaseContext };
Update after request from #Mel. The context may be used using either a HOC:
export const withFirebase = Component => props => (
<FirebaseContext.Consumer>
{firebase => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
);
or using a hook:
import { FirebaseContext } from './firebase';
const MyComponent = () => {
const firebase = useContext(FirebaseContext);
// do something with firebase
};
This may solve the issue, try this >>>
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = { };
const firebaseApp = firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, provider };
most probably you forgot to put 'new' in this line --->
const provider = new firebase.auth.GoogleAuthProvider();
check again.
What-up. I ran into this while working through William Candillon's Adding Firebase To React Native tutorial...
Thoughts: There is a lot to love about Firebase. But the import/export, named vs default and versioning seems to bring a lot of people a lot of unnecessary heart-ache. <-- I say that with tears streaming down my face and a hole in my heart where a love of mobile development & unhappy childhood used to exist mere hours ago.
Put simply: I had firebase.auth is not a function.
Went hunting though node_modules, deleted, re-yarn'd, read blogs, tried importing as named then default, requiring separate modules a-la require('firebase/auth'); under the default import of firebase itself etc etc etc (it really shouldn't be this hard). Also, why do Google not have react documentation? It's 2018. Are people seriously still putting HTML script tags in their front end?
Current Solution => in the end I pulled all my config and firebase.initializeApp(config) into my top level app.js. I'll have to find time later to figure out why the "#firebase" module of auth can't be imported. Or why thats even there? Do i need it? Why isn't it all wrapped into the 'yarn add firebase' module?
Anyway - that'd be my advice. Get it working at top level first. Then hive-off the credentials into a separate file later. That and "Dont drink lager. It bloats-you-out and IPA is infinitely nicer."🍺🍺🍺
I had the same problem and solved it this way:
<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"> </script>
<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>
<script>
// Firebase settings of your web application
var firebaseConfig = {
apiKey: "your apikey",
authDomain: "hackatonteleton.firebaseapp.com",
databaseURL: "https://name-database.firebaseio.com",
projectId: "name-projectid",
storageBucket: "name.appspot.com",
messagingSenderId: "730018138942",
Application ID: "1: 730018138942: web: eb12fac2f91fb17f"
};
// Initialize Firebase
firebase.initializeApp (firebaseConfig);
const auth = firebase.auth ();
</script>
The difference you notice is that they need:
<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>
and initialize the function
const auth = firebase.auth ();`enter code here`
I tried everything in this post, but nothing worked for me.
I discovered the issue with my imports and exports. This worked for me:
const auth = firebase.auth();
const database = firebase.firestore();
export { auth, database }
import { auth, database} from '#/firebase.js';
This was my mistake:
export default { auth, database }
import auth from '#/firebase.js';
My first mistake: I did a export default with two values and this doesnt work. The second mistake, if you export with curly braces, you need to import with curly braces. Otherwise you will get a "Cannot read property 'createUserWithEmailAndPassword' of undefined"
//If you have firebase version 9 you can solve it just importing firebase in this way:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
//This works in my case. For more detail follow the documentation link above:
https://firebase.google.com/docs/web/modular-upgrade
I used this import Statement & it solved the issue
import * as firebase from "firebase/app"
var auth=require("firebase/auth")
console.log(auth)
You will get to access all the methods of auth
I had the same problem with error firebase.auth is not a function since after version-8 there is a change in auth function.
I am using firebase version ^9.6.11 and below is the fix.
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
export const loginRequest = (email, password) => {
const auth = getAuth();
return signInWithEmailAndPassword(auth, email, password);
};
I hope this would help if anyone is facing same error.
My Solution: Completely Remove Node, NPM, NVM & Re-Install
This problem has happened to me a few times in the past (whenever I tried up update or install my node_modules). I literally tried everything above. It always seemed to randomly start working and I was unable to use any previously documented solution the next time the error occurred.
I think I may have had some carry-over issues since I started using Firebase in the early days when there were some weird hacks I did in macOS to get firebase to work correctly.
This solution basically completely removes any trace of node / npm / nvm from your Mac, and re-installs it to use the exact version of node that firebase runs. This uses nvm so if you have other projects that require different node versions, you can switch between node versions on the fly.
1. Delete Existing Node Modules
In your project's folder, delete any node_modules folders you have.
2. Remove Node
This is the tutorial I used to manually remove node. In the early days, I remember having to change something to install node into a different directory (due to permission issues), so I also did additional searches on my computer to remove these files and folders from other areas.
3. Remove NPM
This is the tutorial I used to make sure I removed traces of npm
4. Remove NVM
This is the tutorial I used to manually remove NVM
5. Restart
After removing everything and restarting bash (or restarting your Mac as I did for safety) - typing node, npm, and nvm into the console should simply return command not found.
6. Re-Install Node, NPM Using NVM Only
NVM allows you to install a specific version of node. Since I am using the firebase-functions node 8 runtime (beta), I installed their listed target version of node 8. (as of now, node 8.11.1). This is still in beta, firebase functions uses node 6.11.5 as of the time of this writing.
Instructions for installing node, npm using nvm
7. Update NPM Manually
NVM installed an older version of npm. This command updates NPM to its latest version.
npm install npm#latest -g
8. Install Your Modules
Restart your terminal app just in case, then return to your project folder and run the npm install command.
9. Re-Build & Re-Deploy
If you are using webpack, re-build your project. Then deploy or serve locally.
This process solved the problem for me. Hopefully it works for you and you don't have to do any hack stuff. It seems all I needed to do was some cleaning up.
I didn't need to delete my node_modules folder.
Just confirm if you've both '#firebase' and 'firebase' subfolders inside node_mudules.
If you do, change the path to 'firebase' on your require statement to
'./node_modules/firebase'
and make the next line;
require('./node_modules/firebase/firebase-auth');
For those who are using version 9
Refer this doc section
import { getAuth, GoogleAuthProvider } from "firebase/auth";
you should be using getAuthin order to get "auth" reference.
OR
try this answer if you don't want to make code changes
Related
I am developing a RN app in Expo with firebase as backend. So far, the app only uses firebase auth and firestore and for whatever reason, I randomly started getting the error of ReferenceError: Can't find variable: IDBIndex. I adjusted my firebase config to suit the v9 standards instead of using the compat package. I ensured my app was not using Google Analytics. I have also downgraded to firebase#9.1.0 which matches up with the expo documentation and this other similar post.
I have also git reverted into previous versions of the app (with earlier dependencies and code) when it was working but still got back the same error. When this occurred, I entirely reinstalled node and npm because I thought that was the only other possible reason this could be happening but that was to no avail as well (getting the same IDB error). I still think this is a firebase related issue, but I am pretty much all out of ideas as to what it could be.
Here is my firebase config:
import { initializeApp } from 'firebase/app'
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import {
FIREBASE_API_KEY,
FIREBASE_AUTH_DOMAIN,
FIREBASE_PROJECT_ID,
FIREBASE_STORAGE_BUCKET,
FIREBASE_MESSAGING_SENDER_ID,
FIREBASE_APP_ID,
FIREBASE_MEASUREMENT_ID,
} from '#env';
const firebaseConfig = {
apiKey: FIREBASE_API_KEY,
authDomain: FIREBASE_AUTH_DOMAIN,
projectId: FIREBASE_PROJECT_ID,
storageBucket: FIREBASE_STORAGE_BUCKET,
messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
appId: FIREBASE_APP_ID,
measurementId: FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
export default app;
export const auth = getAuth(app);
export const firestore = getFirestore(app);
if (process.env.NODE_ENV === "development") {
connectAuthEmulator(auth, "http://localhost:9099");
connectFirestoreEmulator(firestore, "localhost", 8080);
}
Do let me know if you need to see more files or need to know more details.
firebaser here
There was a problem in our JavaScript SDKs, where Firebase Installation Services used a version of IDB that doesn't support ESM outside of browser environments. The issue has been fixed in version 9.6.9 of the JavaScript SDK, so be sure to update to that.
I'm getting the same issue, looks like, it's breaking on "firebase": "^9.6.8", which was released a few days ago. Use "firebase": "9.6.7",
I've been getting the same issue, I've tried all the same things as you to no avail. I symbolicated the logs from firebase test lab and came up with this:
Stacktrace
Generally I have no idea how all of these libraries work together, but are you using typesense with firestore? I wonder if your stack trace calls out the same files, but I can't find any smoking gun here. I'll keep updating this thread if I find something. (I would have commented but I don't have the rep yet)
Update: Looks like my build just fixed itself somehow, even submitting builds from this weekend that would constantly crash. So truly I'm not sure what happened but it may be resolved
I had the same issue, my solution was to downgrade the Firebase version from 9.6.8 to 8.2.3.
Here is a reference that could be helpful.
https://github.com/expo/expo-cli/issues/3066
I had this same issue, and after trying multiple different firebase versions, this is the one that fixed the error for me:
npm install firebase#9.4.1 --save
Here's where I found this: Get Started with Cloud Firestore
The other fixes mentioned in this thread are definitely all valid (I have seen other forum posts suggesting the firebase downgrade but in my case it did not work.)
I thought it could be helpful for me to confirm what fixed the problem in my case. The problem arose from when one of my team members used npm instead of expo (which defaults to yarn) to install a dependency. This caused syncing issues between the yarn.lock and package-lock.json. This alone wouldn't have caused much of an issue because a simple yarn or yarn install <dependency> would have solved the issue. However, this dependency happened to require pre-existing dependencies which were of a different version then the ones "expected" by my version of expo. How this IDBIndex error was triggered is still a mystery to me, but in the end all I had to do was remove all my lock files and node_modules, perform an expo updateand finally do a yarn to reinstall all now-compatible packages.
If anyone stumbling across this answer can give a possible explanation as to why this fixed things, that would be much appreciated.
Here is what worked for me (using yarn):
deleted node_modules
deleted yarn.lock
downgraded to firebase "9.6.7" yarn add firebase#9.6.7
downloaded packages using yarn install
made sure all my imports are from the correct firebase library. I am using expo, and I had imported both firebase and react-native-firebase, which was causing trouble. I deleted react-native-firebase for now until I eject if needed.
Fixed my imports. Now you import firebase like this import firebase from "firebase/compat"
if you use firebase analytics, remove it
firebase version "firebase": "9.6.7"
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
// import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: process.env.FIREBASE_APP_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};
export const app = initializeApp(firebaseConfig);
// export const analytics = getAnalytics(app);
export const firestore = getFirestore(app);
Had the same issue, I just downgraded firebase version and it worked.
you can use this code for downgrading:
npm install firebase#9.4.1 --save
This worked for Expo:
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
// metro.config.js
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
I tried to move over to the firebase version 9 and I updated all my imports without changing the code and now when I try to do my google sign in I keep on getting this
TypeError: Cannot read properties of undefined (reading 'GoogleAuthProvider')
This is the code that I am having a problem with
import firebase from "firebase/compat/app";
const provider = new firebase.auth.GoogleAuthProvider();
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
firebaseConfig
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app
I would like to suggest you read the guide to update to Firebase v9 from v8, as I see you confirmed earlier you have only updated your imports, but I'm afraid you will need to do some extras to get your code completely upgraded, even though you mentioned you had issues with Authentication, and one of the main steps is to remove compat code from the previous version, especially in that module. Here are the steps:
About the upgrade process
Each step of the upgrade process is scoped so that you can finish editing the source for your app and then compile and run it without breakage. In summary, here's what you'll do to upgrade an app:
Add the version 9 libraries and the compat libraries to your app.
Update import statements in your code to v9 compat.
Refactor code for a single product (for example, Authentication) to the modular style.
Optional: at this point, remove the Authentication compat library and compat code for Authentication in order to realize the app size benefit for Authentication before continuing.
Refactor functions for each product (for example, Cloud Firestore, FCM, etc.) to the modular style, compiling and testing until all areas are complete.
Update initialization code to the modular style.
Remove all remaining version 9 compat statements and compat code from your app.
You are receiving this error because the code you are using to initialize GoogleAuthProvider is from v8, so please substitute it with the following code as suggested by the official documentation:
import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
If you follow the previous guide missing steps, probably the error will be gone
Finally, I see you have firebaseConfig under your import, and I'm not sure if you are really calling it like this, but I would follow the updated guide.
import { initializeApp } from 'firebase/app';
firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
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
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/