Unhandled Runtime Errorエラー

Next.jsにてgoogleAuthのログイン機能を実装中です。

siguinボタンを押すとエラーが起きます。

firebaseのexport を2つに分けたり、他のサイトから記述を真似したりしたのですがダメでした、
参考
 参考２

firebase/index.js

import * as firebase from 'firebase'
import 'firebase/auth' // If you need it
import 'firebase/firestore' // If you need it
import 'firebase/storage' // If you need it
import 'firebase/analytics' // If you need it

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  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,
}


export default !firebase.apps.length ? firebase.initializeApp(clientCredentials) : firebase.app();

signin.js

import Head from 'next/head'
import { useEffect } from 'react'
import { useUser } from '../context/userContext'
import  firebase  from '../firebase'

export default function Signin() {
  // Our custom hook to get context values
  const { loadingUser, user } = useUser()
  useEffect(() => {
    console.log('user:', user)
  }, [loadingUser, user])

  // TODO: メールアドレス・パスワード認証も追加する
  const email = 'aa@aa.com'
  const password = 'aaaa'
  const auth = firebase.auth();

  // TODO: 別ファイルにする
  const googleSignIn = () => {
    var provider = new firebase.auth.GoogleAuthProvider()
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
    auth
      .signInWithPopup(provider)
      .then((data) => {
        alert(`You are signed In${data.user.email},${data.user.displayName}`)
        console.log(data.user.email, data.user.displayName)
        setUser(data.user)
      })
      .catch((err) => {
        console.log(err)
      })
  }
  const signOut = () => {
    auth
      .signOut()
      .then(() => {
        alert('Logout successful')
        setUser('')
      })
      .catch((err) => {
        console.log(err)
      })
  }
  return (
    <div className="container">
      <Head>
        <title>Hands on Mania</title>
      </Head>
      <main className="u-text-center">
        <h1 className="font-family-homemade">signin</h1>
        <p className="description">signin</p>
        <button onClick={googleSignIn}>Sign In using google</button>
        <button onClick={signOut}>SignOut</button>
      </main>
    </div>
  )
}