Next.js 　　Object(...) is not a functionエラーが消えない

Error was not caught TypeError: Object(...) is not a function
    at factory (webpack-internal:///./node_modules/@firebase/analytics/dist/index.esm.js:507)

npm run dev 似てサーバーを起動後画面に何も表示がされなかったので検証ツールを確認したところこのようなエラーが確認できました。

このエラーに関しての記事をいくつか読み、
npm i react@next react-dom@nextとwebpack-dev-serverコマンドを試したのですが、

Reactdomの方は効果がなく、
webpack-dev-serverの方は
zsh: command not found: webpack-dev-serverと出て使えませんでした。
なにかわかる方がいたらご教授お願いします

signin.js


import React from "react";
import Head from 'next/head'
import Link from 'next/link'
import { useEffect } from 'react'
import { useUser } from '../context/userContext'
import { firebase, auth } from '../firebase'

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

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

  // 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>
        <div>
        <button onClick={googleSignIn}>Sign In using google</button>
        </div>
        <div>
        <button onClick={signOut}>SignOut</button>
        </div>
        <Link href="/">top</Link>
      </main>
    </div>
  )
}

index.js

import React from "react";
import Head from 'next/head'
import Link from 'next/link'
import { useEffect } from 'react'
import { useUser } from '../context/userContext'
import { firebase, auth } from '../firebase'
import Header from '../components/UIkit/Header'

export default function Home() {
  // Our custom hook to get context values
  const { loadingUser, user } = useUser()
  useEffect(() => {
    // if (!loadingUser) {
    //   // You know that the user is loaded: either logged in or out!
    //   console.log('user:', user)
    // }
    // // You also have your firebase app initialized
    // console.log('firebase:', firebase)
  }, [loadingUser, user])

  return (
    <div className="container">
      <Head>
        <title>Hands on Mania</title>
      </Head>
      <Header />
      <main className="u-text-center">
        <h1 className="font-family-homemade">Hands on Mania</h1>
        <p className="description">studying</p>
        <Link href="/signin">signin</Link>
      </main>
    </div>
  )
}

行動規範の内容に同意します

回答1件

これを

<button onClick={googleSignIn}>Sign In using google</button>

こうしたらどうですか？

<button onClick={()=>googleSignIn()}>Sign In using google</button>

SignOutも同様に

投稿2020/09/23 09:40

dyekv

総合スコア128

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Next.js 　　Object(...) is not a functionエラーが消えない

関連した質問