next.js firebase error .a.storage is not a function - javascript

using next.js.
I want to use firebase's cloudStorage to retrieve images.
I've imported firebase into next.js, but I'm getting an error.
The version of firebase is 8.2.7.
var storage = firebase.storage(); in place of
I get a TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_2___default.a.storage is not a function error.
import 'firebase/analytics';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import React, { FunctionComponent } from 'react';
const Gallery: FunctionComponent = () => {
var firebaseConfig = {
apiKey: '***************',
authDomain: '*************',
projectId: '*************',
storageBucket: '*************',
messagingSenderId: '*************',
appId: '*************',
measurementId: '*************',
};
// Initialize Firebase
if (firebase.apps.length === 0) {
firebase.initializeApp(firebaseConfig);
firebase.analytics();
}
var storage = firebase.storage();
var storageRef = storage.ref();
var listRef = storageRef.child('files/uid');
listRef
.listAll()
.then(function (res) {
res.prefixes.forEach(function (folderRef) {
});
res.items.forEach(function (itemRef) {
});
})
.catch(function (error) {});
return (
<div>
<div>aaaa</div>
</div>
);
};
export default Gallery;

It seems that you don't import the Cloud Storage SDK. Do as follows:
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage'; // <-- See the addition here
More info in the doc.

Related

I am getting "firebase storage is not defined" error while trying to implement firebase for my react app

I am creating a signup page that requires thumbnail. firebase authentication is working fine but the i am getting this error for the storage
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
const firebaseConfig = {
apiKey: "AIzaSyDjltfm2KlCLu1wYpbKl5A9pnxGv_7dxMc",
authDomain: "sunodojo.firebaseapp.com",
projectId: "sunodojo",
storageBucket: "sunodojo.appspot.com",
messagingSenderId: "482721025907",
appId: "1:482721025907:web:96cd2758994da9be01bf06"
};
// initializing firebase
firebase.initializeApp(firebaseConfig)
// initializing services
const projectFirestore = firebase.firestore()
const projectAuth = firebase.auth()
const projectStorage = firebase.storage()
// timestamp
const timestamp = firebase.firestore.Timestamp
export { projectFirestore, projectAuth, projectStorage, timestamp }

TypeError: undefined is not an object (evaluating '_app.default.firestore')

`Hi all, i just started learning react native and while working on this project with firebase firestore, i encountered this issue. I am trying to push some data into the database. I am using Firebase version ^9.14.0
firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
// const app = initializeApp(firebaseConfig);
// export const auth = getAuth(app);
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig);
} else {
app = firebase.app();
}
const db = app.firestore();
const auth = firebase.auth();
export { db, auth };
Cart.js
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { View, Text, TouchableOpacity, Modal } from "react-native";
import { useSelector } from "react-redux";
import OrderCheckoutList from "./OrderCheckoutList";
import firebase from "firebase/app";
const addOrderToFirebase = () => {
const db = firebase.firestore();
db.collection("orders").add({
items: items,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
});
//setModalVisible(false);
};
I am not sure if this is related to the firebase v9 or v8, or is it something that i am missing in the source code.`

React Firebase Error: import declarations may only appear at top level of a module

I install firebase in my react project using npm install firebaseand I initialize the firebase config then when I run my app It went blank.
Uncaught SyntaxError: import declarations may only appear at top level of a module bundle.js:121943:1 in my console
My config file init-firebase.js
import { initializeApp } from "firebase/app";
import {getFirestore} from 'firebase/firestore';
const firebaseConfig = {
apiKey: "AIzaSyClp0O4aHwqL6o7cDx3urbDXPpJWazxnWI",
authDomain: "city-truck.firebaseapp.com",
projectId: "city-truck",
storageBucket: "city-truck.appspot.com",
messagingSenderId: "1052243135965",
appId: "1:1052243135965:web:654cc786da98502037fa34",
measurementId: "G-S4HLEKZ9RS"
};
// Import the functions you need from the SDKs you need
const app = initializeApp(firebaseConfig);
// Initialize Firebase
export const db = getFirestore(app);
import { collection,getDocs } from 'firebase/firestore';
import { db } from '../lib/init-firebase';
const getData = () => {
const taskData = collection(db,'Tasks')
getDocs(taskData)
.then(response => {
console.log(response)
})
.catch(error => console.log(error.message))
}
useEffect(() => {
getData()
},[])

#firebase/firestore: Firestore (9.9.3): INTERNAL UNHANDLED ERROR: TypeError: protoLoader.fromJSON is not a function

Currently getting this error when trying to initialise firestore on my Nextjs website. This is localhost instance. This does work on another computer and on my deployed version so I'm not too sure what's going on here. I have already done an npm install. And all the config is already set correctly.
My firebase initialisation code for reference:
import { FirebaseOptions, getApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`,
messagingSenderId: `${process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID}`,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
// Initialize Firebase
const createFirebaseApp = (config: FirebaseOptions) => {
try {
return getApp();
} catch {
return initializeApp(config);
}
}
const app = createFirebaseApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
export {auth, db};

react firebase initializeApp is not defined

I am trying to use firebase storage on react app,
but I get a error that I dont know where is coming from
Line 15:15: 'initializeApp' is not defined
This is my config.js File
Thanks for help
import firebase from "firebase/compat/app";
import 'firebase/storage';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "//myapikey",
authDomain: "//firebase name.firebaseapp.com",
projectId: "//firebase name",
storageBucket: "//firebase name.appspot.com",
messagingSenderId: "156082439629",
appId: "//appid..."
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export {
projectStorage,
projectFirestore
};
If you want to use compat version of Firebase SDK then you would have to import compat version of other Firebase services too. Try refactoring the code as shown below:
import firebase from "firebase/compat/app";
import 'firebase/compat/storage';
import 'firebase/compat/firestore';
const firebaseConfig = {...};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// with firebase. namespace
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export {
projectStorage,
projectFirestore
};
However, I would recommend using the Modular SDK and initialize Firebase like this:
import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {...};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const projectStorage = getStorage();
const projectFirestore = getFirestore();
export {
projectStorage,
projectFirestore
};
Also checkout Getting started with Firebase for the web

Categories

Resources