I try to connect firebase data base to react app but it give error module not found
import firebase from "firebase/app"
import "firebase/auth";
const app = firebase.initializeApp({
apiKey: ,
authDomain: ,
projectId: ,
storageBucket: ,
messagingSenderId: ,
appId:
})
export const auth = app.auth()
export default app
This is a picture of error
Kindly check if firebase exists in your package.json file dependencies
If not found you can run:
npm i #firebase/app
If found you can reinstall the package
Related
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyA-1CDIgbhEIzl3OuyBVj07f23bHcGdhi4",
authDomain: "netflix2-9d006.firebaseapp.com",
projectId: "netflix2-9d006",
storageBucket: "netflix2-9d006.appspot.com",
messagingSenderId: "834718120256",
appId: "1:834718120256:web:add5fc25daf4729190a2a5"
};
const fireabaseApp = firebase.initializeApp(firebaseConfig);
const db = fireabaseApp.firestore();
const auth = firestore.auth();
export {auth} ;
export default db;
this is my firebase.js file i have used latest firebase version even though i have been facing issue with firestore pls guide thank you
this is my firebase.js file i have used latest firebase version even though i have been facing issue with firestore .
can anyone guide how can i import firestore from the firebase Thank you.
Why do I have the error that it says invalid API keys?
This is the sample .env.local
REACT_APP_apiKey=AI**************JmXMKaFQQQrRzp4Q
REACT_APP_authDomain=sample-258a7.firebaseapp.com
REACT_APP_projectId=sample-258a7
REACT_APP_storageBucket=sample-258a7.appspot.com
REACT_APP_messagingSendearId=
REACT_APP_appId=1:1014069435807:web:04390779a92d4e3a4fb1aa
In another file:
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
project under its own project settings
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId,
};
//Initializing Firebase
const app = initializeApp(firebaseConfig);
This is the error:
The Package.json:
Make sure your .env.local is placed in the root directory, and not in any subfolders like src or public. Other than that, nothing seems to be wrong with your code. Just to be safe, cross check your API key with firebase.
P.S. There's no need to hide your firebase public API key, its going to be visible in your app to the general public anyway.
I am using Google Sign In, Firebase, and React firebase hook to login react web application.
inserting firebaseConfig API (.env.local) file and setting the secret keys to firebase config causes errors on the console
.env.local
REACT_APP_AUTH_DOMAIN=doctors-portal-6bc13.firebaseapp.com
REACT_APP_PROJECT_ID=doctors-portal-6bc13
REACT_APP_STORAGE_BUCKET=doctors-portal-6bc13.appspot.com
REACT_APP_MESSAGING_SENDER_ID=725454304359
REACT_APP_APP_ID=1:725454304359:web:49840cbf09a6b578e210c2```
firebase.init.js file
import { initializeApp } from "firebase/app";
import {getAuth } from "firebase/auth";
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,
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;```
Works directly when using Firebase API without using (.env.local)
const firebaseConfig = {
apiKey: "AIzaSyA72Jfi_WXWie-i641mAYhLv3QgiynzLxQ",
authDomain: "doctors-portal-6bc13.firebaseapp.com",
projectId: "doctors-portal-6bc13",
storageBucket: "doctors-portal-6bc13.appspot.com",
messagingSenderId: "725454304359",
appId: "1:725454304359:web:49840cbf09a6b578e210c2",
};
writting like this does not give any error
try this: https://i.stack.imgur.com/xH4Dm.png
You have to place your .env path between `${
It works for me.
I had the same issue.
You just need to Restart the Server.
Close the server and start again with npm start.
This just worked fine for me.
(Every time you create or change anything in your .env file, you need to start the server again )
This question already has answers here:
Module not found: Error: Package path . is not exported from package
(10 answers)
Closed 10 months ago.
I am trying to use firebase inside my project but the classes related to firebase are not getting imported.
This is what I did till now:
Created a new project in firebase console
ran the commands, npm install -g firebase-tools, npm install firebase-admin --save and npm install --save firebase
Created a new file called firebase.js in my project and added the following code:
import firebase from "firebase"
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAdjdq8JsRSWKeHQYCHNzXm8nn29cOh-4s",
authDomain: "ig-reels-a9b15.firebaseapp.com",
projectId: "ig-reels-a9b15",
storageBucket: "ig-reels-a9b15.appspot.com",
messagingSenderId: "1018616208158",
appId: "1:1018616208158:web:bb1026f5301bd9294e070f",
measurementId: "G-W3051LNHFL"
};
const firebaseApp = firebase.initializaApp(firebaseConfig)
const db = firebaseApp.firestore()
export default db
I am using db variable to pull out data from the cloud firestore database like this:
import React, {useState, useEffect} from "react"
import './App.css';
import VideoCard from './VideoCard';
import db from "./firebase";
function App() {
const [reels, setReels] = useState([])
useEffect(() => {
db.collection("reels").onSnapshot(snapshot => {
console.log(snapshot.docs.toString())
setReels(snapshot.docs.map(doc => doc.data()))
})
}, [])
Whenever I run this code I get the following error:
Compiled with problems:
ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules\firebase (see exports field in C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules\firebase\package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
I have successfully installed all the firebase related tools. Why am I getting this error?
First, install firebase then You want to create your own firebase.js file. I am give you the example of
firebase.js
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "apiKey",
authDomain: "authDomain",
projectId: "projectId",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId",
appId: "appid"
};
firebase.initializeApp(firebaseConfig);
export default firebase;
App.js
const db = firebase.firestore();
//write you own code
how do we configure a package in React (in-general).
In NodeJS, We have singleton so we can create an external file, say (./firebase-config.js) and then import it in our main Index.js file (starting point of our node application).
In react till now, I am used to configuring it in Index.html but now I am using react-native which does not have DOM so I can't put my configuration there.
Take index.js or app.js (considering cli version where index.js is the root and app.js is immediate children having all other children) from where I have my config folder at ./src/config/flamelink.js and this to be my configuration
import * as firebase from 'firebase';
import flamelink from 'flamelink';
const firebaseConfig = {
apiKey: '<your-api-key>', // required
authDomain: '<your-auth-domain>', // required
databaseURL: '<your-database-url>', // required
projectId: '<your-project-id>', // required
storageBucket: '<your-storage-bucket-code>', // required
messagingSenderId: '<your-messenger-id>' // optional
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const app = flamelink({ firebaseApp });
Question: Where should I import it to configure it? or will it React-native work just like node and by just importing, things would work?
Yep, you can just have your configuration in, say, firebase-config.js, which might look like
const firebaseConfig = {
apiKey: '<your-api-key>', // required
authDomain: '<your-auth-domain>', // required
databaseURL: '<your-database-url>', // required
projectId: '<your-project-id>', // required
storageBucket: '<your-storage-bucket-code>', // required
messagingSenderId: '<your-messenger-id>' // optional
};
export default firebaseConfig;
and then do
import firebaseConfig from './firebase-config';
elsewhere in your code.