Question

当我将所有代码都保存在顶级App.js文件中时，我便可以呈现Firebase Auth UI小部件。但是，当我将UI代码移动到组件中时，它突然显示：Error: An AuthUI instance already exists for the key "[DEFAULT]"

据我所知，只有一个AuthUI实例。

这是App.js中的相关代码：

import firebase from 'firebase';
import * as firebaseui from 'firebaseui';

// FIREBASE SERVICES: Additional services that you want to use
// require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");


export class App extends Component {
    constructor(props) {
        super(props);
    };


    componentDidMount() {

        // Initialize Firebase
        var config = {
            apiKey: "<removed>",
            authDomain: "<removed>",
            databaseURL: "<removed>",
            projectId: "<removed>",
            storageBucket: "<removed>",
            messagingSenderId: "<removed>"
        };
        firebase.initializeApp(config);

以下是将代码移入“登录”组件的方法：

import * as firebaseui from "firebaseui";
import firebase from "firebase";

require("firebase/auth");


// FirebaseUI config.
const uiConfig = {
    signInSuccessUrl: '#create-account', // the root of the URL is auto-appended
    signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        // firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
        // firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>',
    // Privacy policy url.
    privacyPolicyUrl: '<your-privacy-policy-url>'
};

export const LoginOptions = (props) => {

    // Initialize the FirebaseUI Widget using Firebase.
    const firebase_ui_widget = new firebaseui.auth.AuthUI(firebase.auth());

    // The start method will wait until the DOM is loaded.
    firebase_ui_widget.start('#firebaseui-auth-container', uiConfig);

    return (
    <React.Fragment>
        <div id="firebaseui-auth-container" style={{ marginTop : '5vh'}}></div>

当状态值导致组件呈现时，页面立即因标题错误而中断。

有人可以发现问题吗？

我还应该提到与第一个同时出现第二个错误：

Error: Could not find the FirebaseUI widget element on the page.
▶ 3 stack frames were collapsed.
LoginOptions
src/components/LoginOptions.js:39
  36 | const firebase_ui_widget = new firebaseui.auth.AuthUI(firebase.auth());
  37 | 
  38 | // The start method will wait until the DOM is loaded.
> 39 | firebase_ui_widget.start('#firebaseui-auth-container', uiConfig);
  40 | 
  41 | return (
  42 | <React.Fragment>

React.js错误：密钥“ [DEFAULT]”的AuthUI实例已存在

0 个答案: