ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
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.
Related
I am trying to import auth from my firebase.js file but when I type import {auth} from "./firebase" I get this error:
Module not found: Error: Can't resolve './firebase' in 'C:\Users\Zahraa\projects\netflix-build\src\Screens'
and when I try import {auth} from "../firebase" I get this error:
Module not found: Error: Package path . is not exported from package C:\Users\Zahraa\projects\netflix-build\node_modules\firebase (see exports field in C:\Users\Zahraa\projects\netflix-build\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\Zahraa\projects\netflix-build\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.
I am unsure what the problem is. this is my firebase.js code:
import firebase from "firebase";
const firebaseConfig = {
apiKey: "AIzaSyDMFs_i60UUWNutBKJVzBkZ2U5W93JCnoM",
authDomain: "netflix-clone-18cc6.firebaseapp.com",
projectId: "netflix-clone-18cc6",
storageBucket: "netflix-clone-18cc6.appspot.com",
messagingSenderId: "1000960928424",
appId: "1:1000960928424:web:e10790f27d2d1fa9b1f09d",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db =
firebaseApp.firestore();
const auth = firebase.auth();
export { auth };
export default db;
import firebase from "firebase";
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyDMFs_i60UUWNutBKJVzBkZ2U5W93JCnoM",
authDomain: "netflix-clone-18cc6.firebaseapp.com",
projectId: "netflix-clone-18cc6",
storageBucket: "netflix-clone-18cc6.appspot.com",
messagingSenderId: "1000960928424",
appId: "1:1000960928424:web:e10790f27d2d1fa9b1f09d",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db =
firebaseApp.firestore();
const app = initializeApp(firebaseConfig)
export auth = getAuth(app)
export default db;
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
Can't use Firebase in react app, I installed Firebase using npm install firebase and created Firebase project. And I added the code provide by Firebase.
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
then I used it in react component like below
import {auth} from '../../firebase';
and it says can't compile like
this
You are using the new Firebase Modular SDK which does not use firebase. namespace (same for importing AuthProviders). To initialize Firebase auth you must import getAuth() function from firebase/auth as shown below:
import { initializeApp } from "firebase/app"
import { getAuth, GoogleAuthProvider } from "firebase/auth"
const firebaseConfig = {...};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = getAuth(app);
// initialize this way ^^^
export const googleAuthProvider = new GoogleAuthProvider();
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!
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 }