FireBase Package Path Error on React Project - javascript

I am building a React application, and am quite new to using firebase.
I'am following a instagram clone tutorial, (Clever Programmer's version tutorial). I am at the part of connecting the app to the post creation table, that includes 3 rows, caption, imageURL, and username. However I am met with this error:
ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package /Users/user/node_modules/firebase (see exports field in /Users/user/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, /Users/user/Desktop/InstagramClone/instagram-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.
This is my code:
App.js
import React, { useState, useEffect } from 'react';
import Post from './Post';
import './App.css';
import {db} from './firebase';
function App() {
{/* Setting Variables For Automatic Posts/Variable */}
const[posts, setPosts]= useState([]);
useEffect(()=> {
db.collection('posts').onSnapshot(snapshot => {
setPosts(snapshot.docs.map(doc => doc.data()));
})
}, []);
return (
<div className="app">
{/*HEADER */}
<div className ="app_header">
<img
className="app_headerimage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt=""
/>
</div>
<h1> Feed</h1>
{
posts.map(post => (
<Post username={post.username} caption={post.caption} imageURL={post.imageURL}/>
))
}
</div>
);
}
export default App;
Firebase.js
import firebase from "firebase";
const firebaseApp = firebase.initializeApp({
apiKey: "AIzaSyAnLtnIBO4tQGFB37ZK4yrC9_BeoEo543",
authDomain: "instagram-clone-22312.firebaseapp.com",
projectId: "instagram-clone-22312",
storageBucket: "instagram-clone-22312.appspot.com",
messagingSenderId: "230176338668",
appId: "1:220076398446:web:67197f2ib041b4c7e11e8r2",
measurementId: "L-J7N3NW2EFCW"
});
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export{db, auth, storage};
Heres my folder structure:
Thank you!

If using firebase modular version supporting tree shaking
import { initializeApp } from "firebase/app";
import { getFirestore} } from "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);
If using typical namespace version (probably this une judging from your code)
import firebase from "firebase/app";
import "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = firebase.firestore();
Important, as kentpickard said, firebase changed their api (for the better), I WOULDN'T recommend downgrading but instead learning to use the correct packages, with the new version you can use both, only thing changing is the way they are imported

Related

Firebas Firestore

I'm working on a project on react and this is my first time using firebase.
I have set up my firebase config file in my app. I keep getting an error message (shown below) when I import db from my firebase.config.js file.
error message:
export 'getFireStore' (imported as 'getFireStore') was not found in
'firebase/firestore'
my code:
enter code here
import { initializeApp } from 'firebase/app'
import { getFireStore } from 'firebase/firestore'
// Your web app's Firebase configuration
const firebaseConfig = {
// ...
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
export const db = getFireStore()
enter image description here
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
firebase.initializeApp({
});
const auth = firebase.auth();
const firestore = firebase.firestore();
export { auth, firestore };
TRY THIS CODE
did you install the package firebase using
npm install firebase

NextAuth Firebase Backend "ReferenceError: Cannot access 'app' before initialization"

I'm trying to store users on a firebase backend when using next auth I can't get around this error
Using next-auth FIREBASE adapter.
https://next-auth.js.org/adapters/firebase :DOCS IM FOLLOWING
FIREBASE CLIENT
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
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_MEASURMENT_ID,
};
// Initialize Firebase
const analytics = getAnalytics(app);
const app = initializeApp(firebaseConfig);
export default firebase;
[...nextauth].js
import NextAuth from "next-auth";
import { FirebaseAdapter } from "#next-auth/firebase-adapter";
import firebaseClient from "../../../firebase/FirebaseClient";
import GoogleProvider from "next-auth/providers/google";
import firebase from "firebase/app";
import "firebase/firestore";
const firestore = (firebase.apps[0] ?? firebaseClient).firestore();
export default NextAuth({
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
adapter: FirebaseAdapter(firestore),
});
err
ReferenceError: Cannot access 'app' before initialization
I bet you need to switch lines as following, because you don't have app variable when you create analytics:
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
Alternative Problem: Internally-referenced Functions
Our issue was a bit different. If you've developed a cloud function that has an internally-referenced function, like this:
export.foo = functions.https.onCall(async () => {
// Some functionality here that references internalFunc
const internalFunc = () => { ... }
}
That internalFunc won't be able to be referenced.
The solution for us is to create a utilities.js file in our functions directory, then export the internalFunc from that file. Then, import that function to the script where you're deploying the cloud function.
Hope this helps someone!

Module not found: Package path . is not exported from package

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
I got the following error(s) in my code when trying to connect with Firebase.
File: firebase.js
Code:
import * as firebase from "firebase"
const firebaseConfig = {
apiKey: "***",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
};
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 { db, auth, provider };
Error(s):
Module not found: Package path . is not exported from package <project location>\node_modules\firebase (see exports field in <project location>\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).
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.
> 1 | import * as firebase from "firebase";
2 |
3 | const firebaseConfig = {
4 | apiKey: "***",
Import trace for requested module:
./pages\_app.js
https://nextjs.org/docs/messages/module-not-found
File: ./pages_app.js
import "../styles/globals.css";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, db } from "../firebase";
import Login from "./login";
function MyApp({ Component, pageProps }) {
const [user] = useAuthState(auth);
if (!user) return <Login />;
return <Component {...pageProps} />;
}
export default MyApp;
You should change your firebase import to:
import * as firebase from "firebase"
You should replace 'firebase' to './firebase' as indicated in the error message
I have faced same issues. What you need to do is to call
import * as firebase from "firebase/app"
instead of import * as firebase from "firebase".
Also, if you are trying to use all functions such as GoogleAuthProvider,
you have to import it as follows
import { getAuth, GoogleAuthProvider } from "firebase/auth";
I hope this helps.

Facebook Authentication Firebase with React JS - Providers Error

I want to use Firebase Authentication to login with Facebook with React JS. I leave the firebaseSample.ts and config.ts files below.
I get the error "TypeError: Cannot read property 'FacebookAuthProvider' of undefined" on the React JS side. The line is exactly that.
facebook: new firebase.auth.FacebookAuthProvider()
In some posts "import * as firebase from "firebase/app";" I've seen related articles for changing the import structure.
import * as firebase from "firebase"; was said to be. However, when I do it this way, I get an error on the initializeApp side.
firebaseSample.ts
import * as firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export const auth = firebase.auth();
export default FirebaseSample;
config.ts
const config = {
firebase: {
apiKey: "unique_id",
authDomain: "unique_id",
databaseURL: unique_id",
projectId: "unique_id-1663e",
storageBucket: "unique_id.appspot.com",
messagingSenderId: "unique_id",
appId: "1:unique_id",
measurementId: "G-unique_id"
}
}
export default config;
Updated firebaseSample.ts
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export const auth = firebase.auth();
export default FirebaseSample;
After updating the import files in the firebaseSample.ts file, I started getting the error "ReferenceError: Can't find variable: Providers". I am attaching it as a screenshot.
Updated 2.0 firebaseSample.ts
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export Providers;
export const auth = firebase.auth();
export default FirebaseSample;
Last Update and Information
I resolved the error by updating the firebase import structure in the whole project.
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Thank you very much in advance.
If you are using the new version if Firebase SDK. The version 9 you would need to change your imports to:
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Or use the new syntax according to the new Firebase SDK 9. The compat imports allow you to still use the old syntax.
Can you also try to write this:
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
like this:
const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export { Providers }

Failed to compile ./src/App.js Module not found: Can't resolve 'firebase'

Any and all help would be appreciated! I continue to get this and other errors involving firestore() not being function, etc. I'm not sure how to fix this, I created a to-do react app with firebase and had no issues and a week later I'm receiving errors on any firebase project I create.
I've tried doing import firebase from 'firebase/compat/app' with other imports for firestore, auth, and storage with no luck. I've also tried importing initializeApp from 'firebase/app', although I'm not 100% sure if I've done that correctly.
Currently my firebase.js file looks like:
import firebase from 'firebase';
const firebaseApp = firebase.initializeApp({
...
});
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export { db, auth, storage };
I am doing import { db } from './firebase' in my app.js file.
If you have v9.0.0+ installed, then change your import to compat version:
import firebase from 'firebase/compat/app';
// import "firebase/compat/[SERVICE_NAME]"
I'd recommend checking out the new Modular SDK which has certain performance benefits. You can checkout this Firecast to learn more about the new SDK. The new syntax looks like:
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
const firebaseApp = initializeApp({
...
});
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const storage = getStorage(firebaseApp);
export { db, auth, storage };

Categories

Resources