We Keep Coding

ERROR in Module not found: Error: Package path . is not exported from package

Firebase.js:
import firebase from "firebase";
const firebaseConfig = {
apiKey: <<API_KEY>>,
authDomain: "fir-42683.firebaseapp.com",
projectId: "fir-42683",
storageBucket: "fir-42683.appspot.com",
messagingSenderId: "950284829228",
appId: "1:950284829228:web:f9e6862d17650cfca38789",
measurementId: "G-VWT1P7ES8S"
};
export const db = firebase.initializeApp(firebaseConfig)
App.js
import {db } from './Firebase'
I wrote just a simple code for read data from firebase. but now, iam stuck on this error, what will i do.
ERROR in ./src/Firebase.js 3:0-32 Module not found: Error: Package path . is not exported from package D:\BROCAMP\Week 15\olx\node_modules\firebase (see exports field in D:\BROCAMP\Week 15\olx\node_modules\firebase\package.json)

The problem is const db = firebase.initializeApp(firebaseConfig)
You missed one step, this is actually const app = firebase.initializeApp(firebaseConfig)
Consider this hook which can get your db:
useGetFirestore.ts
import { getApp } from 'firebase/app';
import { getFirestore, Firestore } from 'firebase/firestore';
const useGetFirestore = (): Firestore => {
const app = getApp();
return getFirestore(app);
};
export default useGetFirestore;
The code you are calling db is actually app and that code just needs to run at the top of your app before anything:
const app = initializeApp(firebaseConfig);
Sometimes you only need this:
initializeApp(firebaseConfig);

Next.js env variable not loading

My environment variables are not loading in next.js. No it is not a duplicate of Environment variables not working (Next.JS 9.4.4).
I have a .env.local at the root.
NEXT_PUBLIC_FIREBASE_API_KEY=<key>
NEXT_PUBLIC_FIREBASE_AUTHENTICATION_DOMAIN=<key>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<key>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<key>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<key>
NEXT_PUBLIC_FIREBASE_APP_ID=<key>
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<key>
I am trying to load them in a firebase.tsx file also at root
import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth, signOut } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_REBASE_API_KEY , //need the empty string before the env file is loaded
authDomain: process.env.NEXT_PUBLIC_REBASE_AUTHENTICATION_DOMAIN,
projectId: process.env.NEXT_PUBLIC_REBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_REBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_REBASE_MESSAGING_SENDER_ID ,
appId: process.env.NEXT_PUBLIC_REBASE_APP_ID,
measurementId:process.env.NEXT_PUBLIC_REBASE_MEASUREMENT_ID
};
export const USER_EXIST = "user/exist" ;
export const USER_DUPLICATE = "user/duplicate" ;
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// // Initialize Firebase
export const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
export const db = getFirestore(app);
export async function logOut(){
await signOut(getAuth())
.catch((err) => alert(err));
}
I don't understand why it does not load.
I do seem to follow the doc Environment variable next.js doc.
Can you help me out ?
Thank you

Importing Firebase database object in React results in Uncaught SyntaxError: Cannot use import statement outside a module

I'm working on a project where I need to implement Firestore database in a React app, which I do like this: I have a firebase.js file in the src directory which contains information about Firebase and exports a db object,
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// Firebase project configuration
const firebaseConfig = {
apiKey: ...
authDomain: ...
databaseURL: ...
projectId: ...
storageBucket: ...
messagingSenderId: ...
appId: ...
measurementId: ...
};
const app = initializeApp(firebaseConfig);
// Get a reference to the database service
const db = getFirestore(app);
export { db }
Then I try to import the db object from App.js,
import React, { Component } from 'react';
import { db } from './firebase'
class App extends Component {
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
export default App;
And I get the following error in the console Uncaught SyntaxError: Cannot use import statement outside a module (at bundle.js:45109:2), as a result, the component does not render.
The line in which it seems to be a problem in bundle.js:45109:2 is this:
import { registerVersion } from '#firebase/app';

Firebase Module not found: Can't resolve '../firebase' in '/vercel/path0/components' during deployment

I was trying to deploy my application that uses firebase on Vercel. But it gives `Module not found: Can't resolve '../firebase' in '/vercel/path0/components', in development this works.
My firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECTID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, db, provider };
I am import auth, db and provider where ever I want to use them.
Here is one of the file where this error occurs.
import { auth } from "../firebase";
const Sidebar = () => {
const [user] = useAuthState(auth);
I guess the error is at import { auth } from "../firebase"; part.
Is there any way to fix this? Help would be appreciated.

React Native import firebase 'auth' and 'firestore'

I'm getting errors when I try to simply load the auth and firestore from firebase.
Error message:
TypeError: (0, _app.initializeApp) is not a function. (In '(0, _app.initializeApp)(firebaseConfig)', '(0, _app.initializeApp)' is undefined)
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "KEY",
authDomain: "app.firebaseapp.com",
projectId: "app",
storageBucket: "app.appspot.com",
messagingSenderId: "1293821378",
appId: "5647"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = app.auth();
export { db, auth }
Also when I try to import the auth from another file I try this:
import { auth } from '../firebase';

If you are using Firebase version <9.0.0 which only supports name-spaced SDK, then use the older imports only and not the modular syntax. Try refactoring the code as shown below:
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth"
const firebaseConfig = {};
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
export { db, auth }
Also makes sure you are referring to Web (name-spaced) tab in the documentation.