can't resolve firebase/app error in google authentication in reactjs

Question

I'm trying to use the firebase google authentication in my project but I get this error while compiling:

./src/firebase/firebase.utils.js Module not found: Can't resolve 'firebase' in 'C:\\Users...

This is my firebase.utils.js:

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


const config = {
    apiKey: "AIzaSyCcqIv_fjH5LTw7A6Q9hjevJfGTmN3nIqk",
    authDomain: "crwn-db-4b7c9.firebaseapp.com",
    databaseURL: "https://crwn-db-4b7c9.firebaseio.com",
    projectId: "crwn-db-4b7c9",
    storageBucket: "crwn-db-4b7c9.appspot.com",
    messagingSenderId: "659711574442",
    appId: "1:659711574442:web:1e28381cc2890ad32aabd3",
    measurementId: "G-0B6V9D8PRK"
  };



firebase.initializeApp(config);

export const auth = firebase.auth();
export const firestore = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters ({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup( provider );   

export default firebase;

Then I imported signInWithGoogle function in my sign-in component.

Does anyone know what's the problem? Where's my wrong?

Answer 1

You need to import the firebase module.

The following code should work:

import * as firebase from 'firebase/app';

as opposed to how you are currently importing it

import firebase from 'firebase/app';

Answer 2

This code worked for me

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

const config = {
    apiKey: "AIzaSyCcqIv_fjH5LTw7A6Q9hjevJfGTmN3nIqk",
    authDomain: "crwn-db-4b7c9.firebaseapp.com",
    databaseURL: "https://crwn-db-4b7c9.firebaseio.com",
    projectId: "crwn-db-4b7c9",
    storageBucket: "crwn-db-4b7c9.appspot.com",
    messagingSenderId: "659711574442",
    appId: "1:659711574442:web:1e28381cc2890ad32aabd3",
    measurementId: "G-0B6V9D8PRK"
};


firebase.initializeApp(config);

export const auth = firebase.auth();
export const firebase_store = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account'});

export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase_store;