我遇到TypeError：无法读取未定义的属性“ GoogleAuthProvider”？（React JS）Firebase？

Question

错误 我的应用程序中不断出现错误。实际上我想将firebase prebuilt-ui与google，facebook等的firebase auth集成。尽管我已尝试在删除npm模块后运行npm i命令，但仍然出现错误这是我在预建的react js ui上遵循的教程 https://www.youtube.com/watch?v=zq0TuNqV0Ew&t=1254s。 这是package.json文件。

{
  "name": "olxclone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@material-ui/core": "^4.11.0",
    "bootstrap": "^4.5.3",
    "cra-template": "1.0.3",
    "firebase": "^6.0.0",
    "firebase-admin": "^9.3.0",
    "firebase-functions": "^3.11.0",
    "firebaseui": "^3.1.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^16.13.1",
    "react-firebaseui": "^3.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

以及源文件中的错误。代码为

import React from 'react';

// Import FirebaseAuth and firebase.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle, faBook, faCamera, faMapMarkerAlt, faCoffee, faSearch, faSearchPlus, faUserCircle, faComment } from '@fortawesome/free-solid-svg-icons';
import { Link } from "react-router-dom"
import "../App.css";

import firebase from 'firebase/app';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import { Button, Modal } from 'react-bootstrap'


firebase.initializeApp({
    apiKey: "1:717565114992:web:971b1dd5199c57b04812b5",
    authDomain: "fastsellat.firebaseapp.com"
  })
  

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            show: false,
         
        }
    }
    handleModal = () => {
        this.setState({
            show: true
        })
    }
    closeModal = () => {
        this.setState({
            show: false
        })
    }
    state = { isSignedIn: false }
    uiConfig = {
        signInFlow: "popup",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
        ],
        callbacks: {
          signInSuccess: () => false
        }
      }
    
      componentDidMount = () => {
        firebase.auth().onAuthStateChanged(user => {
          this.setState({ isSignedIn: !!user })
          console.log("user", user)
        })
      }
    render() {
        return (
            <div>
                <Button  variant="outline-primary" onClick={() => { this.handleModal() }}>
                    Login
                    </Button>

                <Modal show={this.state.show}>
                    <Modal.Header>
                      
                            <div style={{width:"100%",border:"1px solid orange"}} id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                <ol className="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to={0} className="active" />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={1} />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={2} />
                                </ol>
                                <div className="carousel-inner">
                                    <div className="carousel-item active">
                                        <img id="img1" src="https://statics.olx.com.pk/external/base/img/loginEntryPointPost.webp" alt="First slide" />
  
    
    <p style={{textAlign:"center"}}>Help make OLX safer place to buy and sell</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img2"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointFavorite.webp" alt="Second slide" />
                                        
    
    <p style={{textAlign:"center"}}>Contact and close deals faster</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img3"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointChat.webp" alt="Third slide" />
                    
    <p style={{textAlign:"center"}}>Save all your favourite items in one place</p>
  
                                    </div>
                                </div>
                                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                    <span className="carousel-control-prev-icon" aria-hidden="true" />
                                    <span className="sr-only">Previous</span>
                                </a>
                                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                    <span className="carousel-control-next-icon" aria-hidden="true" />
                                    <span className="sr-only">Next</span>
                                </a>
                            </div>
                       
                    </Modal.Header>
                    <Modal.Body>
                    {
                        this.state.isSignedIn ? (
                            <span>
                            <div>Signed In!</div>
                            <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                            <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                            <img
                              alt="profile picture"
                              src={firebase.auth().currentUser.photoURL}
                            />
                          </span>
                        ):(
                            <StyledFirebaseAuth
                            uiConfig={this.uiConfig}
                            firebaseAuth={firebase.auth()}
                          />
                        )}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={() => { this.closeModal() }} variant="secondary">
                            Close
                        </Button>
                        <Button variant="primary">
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
}





export default Login;

这是我通过以下命令从中安装ui StyledFirebaseAuth的网站 https://www.npmjs.com/package/react-firebaseui#packing-your-app 我已经尝试了许多解决方案。即降级到较低版本的Firebase，但错误仍然存​​在。 谢谢。感谢您的帮助。这是我代码的运行示例。谢谢
https://codesandbox.io/s/lucid-noyce-nn1hn?file=/public/manifest.json

Answer 1

好的，就像上面评论中提到的Yaakov Ainspan一样，您必须包括import语句firebase / auth。因此，您必须像这样在组件中导入它

import firebaseAuth from 'firebase/auth/dist/index.esm'

，其余代码相同

import React from 'react';

// Import FirebaseAuth and firebase.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle, faBook, faCamera, faMapMarkerAlt, faCoffee, faSearch, faSearchPlus, faUserCircle, faComment } from '@fortawesome/free-solid-svg-icons';
import { Link } from "react-router-dom"
import "../App.css";

import firebase from 'firebase/app';

import firebaseAuth from 'firebase/auth/dist/index.esm'

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import { Button, Modal } from 'react-bootstrap'


 firebase.initializeApp({
    apiKey: "AIzaSyDAelHByyhxwHlF7JIeCCGwL5HP622k5E8",
    authDomain: "fastsellat.firebaseapp.com",
    databaseURL: "https://fastsellat.firebaseio.com",
    projectId: "fastsellat",
    storageBucket: "fastsellat.appspot.com",
    messagingSenderId: "717565114992",
    appId: "1:717565114992:web:971b1dd5199c57b04812b5",
    measurementId: "G-0NRD11FNQZ"
  })
  

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            show: false,
         
        }
    }
    handleModal = () => {
        this.setState({
            show: true
        })
    }
    closeModal = () => {
        this.setState({
            show: false
        })
    }
    state = { isSignedIn: false }
    uiConfig = {
        signInFlow: "popup",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
        ],
        callbacks: {
          signInSuccess: () => false
        }
      }
    
      componentDidMount = () => {
        firebase.auth().onAuthStateChanged(user => {
          this.setState({ isSignedIn: !!user })
          console.log("user", user)
        })
      }
    render() {
        return (
            <div>
                <Button  variant="outline-primary" onClick={() => { this.handleModal() }}>
                    Login
                    </Button>

                <Modal show={this.state.show}>
                    <Modal.Header>
                      
                            <div style={{width:"100%",border:"1px solid orange"}} id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                <ol className="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to={0} className="active" />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={1} />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={2} />
                                </ol>
                                <div className="carousel-inner">
                                    <div className="carousel-item active">
                                        <img id="img1" src="https://statics.olx.com.pk/external/base/img/loginEntryPointPost.webp" alt="First slide" />
  
    
    <p style={{textAlign:"center"}}>Help make OLX safer place to buy and sell</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img2"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointFavorite.webp" alt="Second slide" />
                                        
    
    <p style={{textAlign:"center"}}>Contact and close deals faster</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img3"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointChat.webp" alt="Third slide" />
                    
    <p style={{textAlign:"center"}}>Save all your favourite items in one place</p>
  
                                    </div>
                                </div>
                                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                    <span className="carousel-control-prev-icon" aria-hidden="true" />
                                    <span className="sr-only">Previous</span>
                                </a>
                                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                    <span className="carousel-control-next-icon" aria-hidden="true" />
                                    <span className="sr-only">Next</span>
                                </a>
                            </div>
                       
                    </Modal.Header>
                    <Modal.Body>
                    {
                        this.state.isSignedIn ? (
                            <span>
                            <div>Signed In!</div>
                            <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                            <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                            <img
                              alt="profile picture"
                              src={firebase.auth().currentUser.photoURL}
                            />
                          </span>
                        ):(
                            <StyledFirebaseAuth
                            uiConfig={this.uiConfig}
                            firebaseAuth={firebase.auth()}
                          />
                        )}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={() => { this.closeModal() }} variant="secondary">
                            Close
                        </Button>
                        <Button variant="primary">
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
}
export default Login;

您的package.json文件也可以。 我还要澄清一件事，您必须使用7.24.0或更低版本的Firebase，而不要使用最新的版本。谢谢