CODEWITHSUNDEEP
reactjsfirebasenext.jsfirebase-tools
Basil Rohner
Basil Rohner

Reputation: 26

Error with firebase integration on my Nextjs project

I recently tried to implement the firebase CLI to my Nextjs project to not only host it on the firebase servers but also to gain access to the firebase tools such as auth and Firestore. I tried setting up my firebase and noticed that I couldn't use the auth and Firestore functions although imported.

What I tried was the following:

import firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';

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

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const firestore = firebase.firestore();

export default { firebase, auth, firestore };

Which resulted in:

info  - Loaded env from /Users/basil/Documents/GitHub/Hustle/.env.local
info  - Linting and checking validity of types .Failed to compile.

./firebase/clientApp.ts:18:23
Type error: Property 'auth' does not exist on type 'typeof             import("/Users/usr/Documents/GitHub/Hustle/node_modules/firebase/app/dist/app/index")'.

  16 | 
  17 | firebase.initializeApp(firebaseConfig);
> 18 | const auth = firebase.auth();
     |                       ^
  19 | const firestore = firebase.firestore();
  20 | 
  21 | export default { firebase, auth, firestore };

Upvotes: 0

Views: 120

Answers (1)

Utkarsh
Utkarsh

Reputation: 115

Instead of importing firebase from "firebase/app", try importing firebase from "firebase". Consider the below given code as an example -

import firebase from 'firebase'
import 'firebase/firestore'

const firebaseConfig = {
    // config
};

const firebaseApp  = firebase.initializeApp(firebaseConfig);
const firestore     = firebaseApp.firestore();
const auth         = firebaseApp.auth();
const provider = new firebase.auth.GoogleAuthProvider();


export {auth, provider};
export default database;

Upvotes: 1

Related Questions