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);

NextAuth and Firebase causing SyntaxError Cannot use import statement outside a module

I'm new to both Next.js and Firebase. I've been trying to use NextAuth.js to authenticate with Discord for my firebase app. However, I ran into an error.
I've tried adding "type": "module" into my package.json file and converting all my imports into requires instead but I still get the same error.
This is my firebase.js
import firebase from "firebase/compat/app";
import { getApps, getApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
export const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};
export const app = getApps.length > 0 ? getApp() : firebase.initializeApp(firebaseConfig);
export const firestore = getFirestore(app);
export const storage = getStorage(app);
This is my [...nextauth].js
import NextAuth from "next-auth";
import DiscordProvider from 'next-auth/providers/discord';
import { FirestoreAdapter } from "#next-auth/firebase-adapter";
import { firebaseConfig } from "../../../lib/firebase";
export default NextAuth({
providers: [
DiscordProvider({
clientId: process.env.DISCORD_ID,
clientSecret: process.env.DISCORD_SECRET
}),
],
adapter: FirestoreAdapter(firebaseConfig),
})
Any help would be much appreciated

I went through this as well. I found using a simple config easier and exporting the default app into your component. Then in the component, add the extra functionality.
Here is my config;
import { initializeApp } from 'firebase/app';
// Initialize Firebase
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}
const app = initializeApp(firebaseConfig)
export default app;
then in controller...
import { getDatabase } from 'firebase/database';
import app from '../services/firebase';
const rtdb = getDatabase(app);

how to export const db = firebase.firestore()

how can I export and import firebase database?
When I do export const db = firebase.firestore(), an error will show me this message:
ERROR in ./src/firebase.js 10:0-32
Module not found: Error: Package path . is not exported from package C:\Users\sapic\OneDrive\Plocha\Revizor\node_modules\firebase (see exports field in C:\Users\sapic\OneDrive\Plocha\Revizor\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\sapic\OneDrive\Plocha\Revizor\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.
Using Firestore, React, NPM.

For example
Export
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
}
const firebaseApp = initializeApp(firebaseConfig)
export const auth = getAuth(firebaseApp)
export const db = getFirestore(firebaseApp)
Import
import { auth, db } from '../../app/firebase'

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.

Attempted import error: 'messaging' is not exported from 'firebase/app'

import firebase from "firebase/app";
import "firebase/messaging";
let messaging = null
if (firebase.messaging.isSupported()) {
const initializedFirebaseApp = firebase.initializeApp({
// Project Settings => Add Firebase to your web app
apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DBURL,
projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MSG_SENDERID,
appId: process.env.REACT_APP_FIREBASE_APPID
});
messaging = initializedFirebaseApp.messaging();
}
export { messaging };
I am starting to run my server am getting failed to compile errors below Like this:
Attempted import error: 'messaging' is not exported from 'firebase/app' (imported as 'firebase').
How can i fix this ???
enter image description here