How to fix this bug ? Unexpected SyntaxError: Unexpected token '!'

Question

So basically the console is showing me that I have an unexpected token but I don't think there is any unexpected token. Please help me. I have taken way too much time trying to fix this problem. Here is the code -

import React from 'react';
import firebase from 'firebase';

export default function App() {
  // I have deleted this information because I don't want anyone to access my data
  const firebaseConfig = {};

  firebase.initializeApp(firebaseConfig);

  function signInWithGoogle() {
    var google_provider = new firebase.auth.GoogleAuthProvider();
    firebase
      .auth()
      .signInWithPopup(google_provider)
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  return (
    <div>
      <h1>Google Sign In Authentication</h1>
      <button onClick={signInWithGoogle}>Sign In</button>
    </div>
  );
}

Answer 1

The only issue I see in the provided code is you have not imported the Firebase Auth SDK. You can import that as shown below:

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

Also make sure you are using V8.XX or lower with above code. If you have new Modular SDK V9.0.0+ then change your imports to compat version to keep using existing code:

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