Reactjs 盖茨比大厦→；WebPackageError:TypeError:无法读取属性'；谷歌供应商'；未定义的

我已经使用firebase auth在gatsby中实现了登录功能。
我用gatsby develop对其进行了测试，登录功能运行良好。
然而，当我运行

gatsby构建时

，我得到了以下错误消息

WebPackageError:TypeError:无法读取未定义的属性“GoogleAuthProvider”

你能告诉我如何解决这个错误吗

---

我正在使用。
它具有以下设置

gatsby config.js

{
解析：“盖茨比插件firebase”，
选项：{
证书：{
apiKey:“***”，
authDomain:“***”，
数据库URL:“***”，
projectId:“***”，
storageBucket:“***”，
messagingSenderId:“***”，
appId:“***”，
},
},
},

gatsby browser.js

导入“firebase/存储”
导入“firebase/auth”
导入“firebase/firestore”

gatsby ssr.js

导入“firebase/存储”
导入“firebase/auth”
导入“firebase/firestore”

GoogleAuthProvider

的使用方式如下

登录tsx

从“盖茨比插件firebase”导入firebase；
const googleProvider=new firebase.auth.GoogleAuthProvider（）；
const facebookProvider=new firebase.auth.FacebookAuthProvider（）；
const twitterProvider=new firebase.auth.TwitterAuthProvider（）；
const setProvider=（名称：string）=>{
交换机（名称）{
案例“谷歌”：
返回googleProvider
案例“Facebook”：
返回facebookProvider
案例“推特”：
返回推特提供者
违约：
返回googleProvider
}
}
const auth=firebase.auth（）；
常量符号函数=异步（e）=>{
const provider=setProvider（e.currentTarget.name）；
使用弹出窗口等待身份验证登录（提供程序）；
const currentUser=auth.currentUser；
...
}
常量符号=（）=>{
返回(
谷歌
啁啾
脸谱网
)
}

你必须思考盖茨比是如何工作的，才能理解发生了什么。当

gatsby develop

的编译由浏览器处理时，

gatsby build

在服务器（sserver-sideRending）中编译，其中浏览器中可用的大部分功能不在服务器中

基本上，您不能在构建时要求或导入提供程序，因为它们尚未设置。要绕过此限制，您可以创建一个自定义挂钩（

useAuthState

）并按如下方式使用它：

import firebase from "gatsby-plugin-firebase"
import useAuthState from ...

function MyComponent() {
const [user, loading, error] = useAuthState(firebase); // NOT firebase.auth()

// ...
if (loading) return <p>Loading...</p>
if (user) return <p>Hi, {user.displayName}!</p>
if (error) //handle error

}

注：贷项为

如您所见，您正在使用一个

useffect

钩子，等待Firebase连接检索所需的数据。这是等待加载DOM树，而不是在构建时触发

资源：

---

是的，我们的想法是等待，在SSR结束之前不要加载验证代码。

import {useEffect, useReducer, useState} from "react";

export default function useAuthState(firebase) {
    const [auth, setAuth] = useState(undefined);

    const [state, dispatch] = useReducer(
        (state, action) => {
            switch (action.type) {
                case "auth_state_changed":
                    return {
                        ...state,
                        user: action.user,
                        loading: false,
                    };
                case "error":
                    return {
                        ...state,
                        error: action.error,
                        loading: false,
                    };
            }
        },
        {
            user: undefined,
            loading: true,
            error: undefined,
        }
    );
    useEffect(() => {
        setAuth(firebase.auth());
    }, [firebase]);

    useEffect(() => {
        if (auth === undefined) return;

        const unsubscribe = auth.onAuthStateChanged(
            user => {
                dispatch({type: "auth_state_changed", user});
            },
            error => {
                dispatch({type: "error", error});
            }
        );

        return () => {
            unsubscribe();
        };
    }, [auth]);
    return [state.user, state.loading, state.error];