I created a Firebase class for my React project utilizing Firebase, but the file returns the following error:
TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.app.initializeApp is not a function
What should I do?
Here is the code:
import 'firebase/app';
import { app } from 'firebase/app';
import 'firebase/auth';
var firebaseConfig = {
// config stuff
};
class Firebase{
constructor(){
app.initializeApp(firebaseConfig);
this.auth = app.auth()
}
// *** Auth API ***
doCreateUserWithEmailAndPassword = (email, password) =>
this.auth.createUserWithEmailAndPassword(email, password);
doSignInWithEmailAndPassword = (email, password) =>
this.auth.signInWithEmailAndPassword(email, password);
}
export default Firebase;
import app from 'firebase/app';
app is default export, there is no need to wrap it with curly braces.
If you want to initialize Firebase using ES6 style imports, it goes like this:
import * as firebase from 'firebase/app'
firebase.initializeApp(firebaseConfig)
Then you go on to use Firebase products:
import 'firebase/auth'
const auth = firebase.auth()
See the firebase module documentation on npm.
Related
I have decided to convert my project to use Webpack as it was getting pretty messy and I'm struggling to have multiple js files for each part of the app (member, plan, auth, etc) that uses Firebase in some way (functions, database, auth, etc). It seems evverything needs to be in index.js to work.
I always get a (different) weird error that relates to Firebase not be accessible from the index.js file.
How do I structure this so that I can use Firebase in multiple files and then bundle into one with Webpack at the end?
Here's what I have:
index.js
import $ from 'jquery';
import mixpanel from 'mixpanel-browser';
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
const firebaseConfig = {
...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const analytics = getAnalytics();
const auth = getAuth();
// Javascript
import './js/auth.js';
import './js/members.js';
// Styles
import './scss/fonts.scss';
import './scss/auth.scss';
import './scss/main.scss';
import './scss/navbar.scss';
import './scss/buttons.scss';
import './scss/inputs.scss';
...
members.js
import { getFunctions, httpsCallable } from "firebase/functions";
const functions = getFunctions();
const listMembers = httpsCallable(functions, 'listMembers');
listMembers()
.then((result) => {
const data = result.data;
const sanitizedMessage = data.text;
console.log(sanitizedMessage);
})
.catch((error) => {
const code = error.code;
const message = error.message;
const details = error.details;
});
I'm working on a project on react and this is my first time using firebase.
I have set up my firebase config file in my app. I keep getting an error message (shown below) when I import db from my firebase.config.js file.
error message:
export 'getFireStore' (imported as 'getFireStore') was not found in
'firebase/firestore'
my code:
enter code here
import { initializeApp } from 'firebase/app'
import { getFireStore } from 'firebase/firestore'
// Your web app's Firebase configuration
const firebaseConfig = {
// ...
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
export const db = getFireStore()
enter image description here
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
firebase.initializeApp({
});
const auth = firebase.auth();
const firestore = firebase.firestore();
export { auth, firestore };
TRY THIS CODE
did you install the package firebase using
npm install firebase
I am new in vite. I am trying to initialize the firebase app. but I am getting errors like below
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()
I created a file name firebase.ts but i am not really sure where can i include this to initialize firebase globally.
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useHead } from '#vueuse/head'
import { isDark } from '/#src/state/darkModeState'
import useNotyf from '/#src/composable/useNotyf'
import sleep from '/#src/utils/sleep'
import { getAuth, signInWithEmailAndPassword } from '#firebase/auth'
const isLoading = ref(false)
const router = useRouter()
const notif = useNotyf()
const username = ref('')
const password = ref('')
const handleLogin = async () => {
if (!isLoading.value) {
isLoading.value = true
signInWithEmailAndPassword(getAuth(), username.value, password.value)
.then((user) => {
isLoading.value = false
router.push({ name: 'sidebar-dashboards-course' })
})
.catch((err) => {
isLoading.value = false
notif.error(
'There is no user record corresponding to this identifier. The user may be deleted'
)
})
}
}
Any solution appreciated!
In your firebase.ts, you are initializing Firebase using the compat version (that let's you use the name-spaced syntax even in V9) but you are trying to use the Modular version in your Vue components. Instead, try initializing Firebase using modular SDK as well. So the firebase.ts should look like:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {...};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);
export { auth, db, storage };
Then try importing these instances in your components instead of using get[Service]() functions again.
import { auth } from "../path/to/firebase.ts" // update the path as per your dir structure
// usage: instead of getAuth() here
await signInWithEmailAndPassword(auth, username.value, password.value)
I want to use Firebase Authentication to login with Facebook with React JS. I leave the firebaseSample.ts and config.ts files below.
I get the error "TypeError: Cannot read property 'FacebookAuthProvider' of undefined" on the React JS side. The line is exactly that.
facebook: new firebase.auth.FacebookAuthProvider()
In some posts "import * as firebase from "firebase/app";" I've seen related articles for changing the import structure.
import * as firebase from "firebase"; was said to be. However, when I do it this way, I get an error on the initializeApp side.
firebaseSample.ts
import * as firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export const auth = firebase.auth();
export default FirebaseSample;
config.ts
const config = {
firebase: {
apiKey: "unique_id",
authDomain: "unique_id",
databaseURL: unique_id",
projectId: "unique_id-1663e",
storageBucket: "unique_id.appspot.com",
messagingSenderId: "unique_id",
appId: "1:unique_id",
measurementId: "G-unique_id"
}
}
export default config;
Updated firebaseSample.ts
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export const auth = firebase.auth();
export default FirebaseSample;
After updating the import files in the firebaseSample.ts file, I started getting the error "ReferenceError: Can't find variable: Providers". I am attaching it as a screenshot.
Updated 2.0 firebaseSample.ts
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export Providers;
export const auth = firebase.auth();
export default FirebaseSample;
Last Update and Information
I resolved the error by updating the firebase import structure in the whole project.
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Thank you very much in advance.
If you are using the new version if Firebase SDK. The version 9 you would need to change your imports to:
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Or use the new syntax according to the new Firebase SDK 9. The compat imports allow you to still use the old syntax.
Can you also try to write this:
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
like this:
const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export { Providers }
Any and all help would be appreciated! I continue to get this and other errors involving firestore() not being function, etc. I'm not sure how to fix this, I created a to-do react app with firebase and had no issues and a week later I'm receiving errors on any firebase project I create.
I've tried doing import firebase from 'firebase/compat/app' with other imports for firestore, auth, and storage with no luck. I've also tried importing initializeApp from 'firebase/app', although I'm not 100% sure if I've done that correctly.
Currently my firebase.js file looks like:
import firebase from 'firebase';
const firebaseApp = firebase.initializeApp({
...
});
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export { db, auth, storage };
I am doing import { db } from './firebase' in my app.js file.
If you have v9.0.0+ installed, then change your import to compat version:
import firebase from 'firebase/compat/app';
// import "firebase/compat/[SERVICE_NAME]"
I'd recommend checking out the new Modular SDK which has certain performance benefits. You can checkout this Firecast to learn more about the new SDK. The new syntax looks like:
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
const firebaseApp = initializeApp({
...
});
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const storage = getStorage(firebaseApp);
export { db, auth, storage };