import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
var firebaseConfig = {
apiKey: "AIzaSyCEtbuZ3oIA8amHdyOBXMLLmHCZMuHIPVg",
authDomain: "react-slack-clone-6284c.firebaseapp.com",
databaseURL: "https://react-slack-clone-6284c.firebaseio.com",
projectId: "react-slack-clone-6284c",
storageBucket: "react-slack-clone-6284c.appspot.com",
messagingSenderId: "1010926924701",
appId: "1:1010926924701:web:d5d331af0cfe6fd31db574",
measurementId: "G-9K7S58J5LF"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
export default firebase;
My firebase.js file is inside the src folder and i am getting the error as mentioned.While importing firebase to my Register.js, i am encoutering this error
See https://firebase.google.com/docs/web/setup#using-module-bundlers
You should add import * as firebase from "firebase/app";
// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";
// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
npm install firebase#8.3.1 --save
Related
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
I am tried to get the firebase config file using env.process. If I use directly the config info. its working well...
Firebase.init.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
.env
REACT_APP_API_KEY=*********************
REACT_APP_AUTH_DOMAIN=**************************
REACT_APP_PROJECT_ID=****************
REACT_APP_STORAGE_BUCKET=***********************
REACT_APP_MESSAGING_SENDER_ID=****************
REACT_APP_APP_ID=***************************
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
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();
This maybe a very novice question but I am stuck at here. I am a begineer in React-native and currently working with firebase real-time db with react. I've already initialized my firebase app in one screen(login.js). Since I am using firebase 3.X I cannot reinitialize that app again in another screen. How can I access that already initialized app into another screen(register.js)?
And for the modular Firebase Web SDK 9 and up:
import { initializeApp } from "firebase/app";
import Constants from "expo-constants";
// Initialize Firebase
const firebaseConfig = {
apiKey: Constants.manifest.extra.apiKey,
authDomain: Constants.manifest.extra.authDomain,
projectId: Constants.manifest.extra.projectId,
storageBucket: Constants.manifest.extra.storageBucket,
messagingSenderId: Constants.manifest.extra.messagingSenderId,
appId: Constants.manifest.extra.appId,
measurementId: Constants.manifest.extra.measurementId,
};
const app = initializeApp(firebaseConfig);
export default app;
And then where you need it:
import app from '../config/firebaseConfig';
This is using Expo and 'expo-contants' (https://docs.expo.dev/versions/latest/sdk/constants/) to avoid committing your keys to your Github repo. If not using Expo then you can use react-native-dotenv (https://www.npmjs.com/package/react-native-dotenv) which does the same for pure react native apps.
Here is how you export Firebase Config
Make sure you have added firebase to your project by npm install firebase --save
then create a config file at ./Config/FirebaseConfig.js
Add the below code in your file.
import Fb from 'firebase';
const config = {
apiKey: 'apiKey',
authDomain: 'projectId.firebaseapp.com',
databaseURL: 'https://databaseName.firebaseio.com',
};
const Firebase = Fb.initializeApp(config);
export default Firebase;
After this you can import firebase in any of your component by import Firebase from 'Firebase';