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

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

CodePudding user response：

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.X.X 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"