Firebase Google 身份验证构造函数未定义错误答案

【问题标题】：Firebase Google Authentication Constructor undefined ErrorFirebase Google 身份验证构造函数未定义错误
【发布时间】：2022-08-20 14:31:16
【问题描述】：

苏。我一直在尝试在我的项目中实现 Firebase google auth，不幸的是我在控制台上遇到了以下错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading \'constructor\')
    at _assertInstanceOf (assert.ts:101:1)
    at signInWithPopup (popup.ts:86:1)
    at signInWithGoogle (App.js:52:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)

代码如下

import React from \"react\";
import { initializeApp } from \"firebase/app\";
import { getAuth , GoogleAuthProvider , signInWithPopup } from \"firebase/auth\"

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

function Home() {
    const [user] = useAuthState(auth);
    return (
        <div className=\"App\">
            <header>Welcome to PixShare</header>
            <h1>
                Home
                <section>
                    {user ? <Home /> : <SignIn />}
                </section>
            </h1>
        </div>
    );
}

const SignIn = () => {
    const signInWithGoogle = () => {
        const provider = new GoogleAuthProvider();
        signInWithPopup(provider)
    }

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

export default Home;

有人可以帮我解决问题吗？ package.json文件如下图

{
  \"name\": \"pixshare\",
  \"version\": \"0.1.0\",
  \"private\": true,
  \"dependencies\": {
    \"@testing-library/jest-dom\": \"^5.16.5\",
    \"@testing-library/react\": \"^13.3.0\",
    \"@testing-library/user-event\": \"^13.5.0\",
    \"firebase\": \"^9.9.2\",
    \"react\": \"^18.2.0\",
    \"react-dom\": \"^18.2.0\",
    \"react-firebase-hooks\": \"^5.0.3\",
    \"react-router-dom\": \"^6.3.0\",
    \"react-scripts\": \"5.0.1\",
    \"web-vitals\": \"^2.1.4\"
  },
  \"scripts\": {
    \"start\": \"react-scripts start\",
    \"build\": \"react-scripts build\",
    \"test\": \"react-scripts test\",
    \"eject\": \"react-scripts eject\"
  },
  \"eslintConfig\": {
    \"extends\": [
      \"react-app\",
      \"react-app/jest\"
    ]
  },
  \"browserslist\": {
    \"production\": [
      \">0.2%\",
      \"not dead\",
      \"not op_mini all\"
    ],
    \"development\": [
      \"last 1 chrome version\",
      \"last 1 firefox version\",
      \"last 1 safari version\"
    ]
  }
}

有谁知道我哪里出错了？真的可以使用一些帮助

标签： javascript html node.js reactjs firebase

【解决方案1】：

signInWithPopup() 函数将Auth 实例作为第一个参数。
所以signInWithPopup(provider) 函数应该是signInWithPopup(auth, provider)

【讨论】：