import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';
Already added the firestore import here so that fixed most of everybody elses problem
const clienteCredentials = {
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 default function initFirebase() {
if (!firebase.apps.length){
firebase.initializeApp(clienteCredentials);
}
}
Keeps getting the error here:
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export { projectFirestore, projectStorage };
If you are using Firebase V9.0.0+ then you can use compat version to keep using existing code (V8 name-spaced syntax):
import firebase from "firebase/compat/app"
import "firebase/compat/storage"
import "firebase/comapt/firestore"
I'd recommend upgrading to new Modular Syntax which has certain benefits and supports tree-shaking. The newer syntax looks like:
import { initializeApp } from "firebase/app" // no compat
import { getFirestore } from "firebase/firestore"
import { getStorage } from "firebase/storage"
const app = initializeApp({...config})
const firestore = getFirestore(app)
const storage = getStorage(app)
Do checkout the documentation which has examples of both older and newer syntaxes.