Question

我正在使用本教程使用Firebase在我的ReactJS应用中实现用户身份验证： https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/

之前我得到的长度未定义，由于在初始化firebase时删除了应用程序长度的检查，因此解决了这个问题。但是现在我现在得到firebase.initializeApp不是函数错误。

我发现的唯一其他类似错误是在nodeJS中，但解决方案只是一个错字。 firebase.intializeApp is not a function

我已经删除了访问firebase提供的方法的所有多余步骤，现在我只是直接使用firebase提供的方法。（参见帖子的版本历史。）

我目前的代码设置如下：

Register.js

import React, { PropTypes, Component } from 'react';
import Button from 'react-bootstrap/lib/Button';
import Panel from 'react-bootstrap/lib/Panel';
import { auth } from 'firebase';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Register.css';
import history from '../../core/history';
import Background from '../login/loginBackground.jpg';

const sectionStyle = {
  width: '100%',
  height: '900px',
  backgroundImage: `url(${Background})`,
};

const title = 'Register';

const INITIAL_STATE = {
  username: '',
  email: '',
  passwordOne: '',
  passwordTwo: '',
  error: null,
};
// the key value is used as dynamic key to allocate the actual value in the local state object.
const byPropKey = (propertyName, value) => () => ({
  [propertyName]: value,
});

class Register extends Component {
  constructor(props, context) {
    super(props);
    this.state = { ...INITIAL_STATE };
    context.setTitle(title);
  }
  onSubmit = (event) => {
    const {
      username,
      email,
      passwordOne,
    } = this.state;
      //**changed to access methods directly from firebase**
    auth().createUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        // success: set state of fields to INITIAL_STATE (clear fields)
        this.setState(() => ({ ...INITIAL_STATE }));
      })
      .catch(error => {
        // failure: show error in form
        this.setState(byPropKey('error', error));
      });
    // prevent browser reload
    event.preventDefault();
  };

  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
      error,
    } = this.state;
    // validate fields for same passwords, empty fields etc.
    const isInvalid =
    passwordOne !== passwordTwo ||
    passwordOne === '' ||
    email === '' ||
    username === '';
    return (
      <section style={sectionStyle}>
        <div className="col-md-4 col-md-offset-4">
          <div className="text-center">
            <h1 className="login-brand-text">Register Now!!</h1>
          </div>
          <Panel header={<h3>Please Register</h3>} className="registration-panel">
            <form onSubmit={this.onSubmit}>
              <div className="form-group">
                <input
                  className="form-control"
                  value={username}
                  onChange={event => this.setState(byPropKey('username', event.target.value))}
                  type="text"
                  placeholder="Full Name"
                />
              </div>
              <div className="form-group">
                <input
                  className="form-control"
                  value={email}
                  onChange={event => this.setState(byPropKey('email', event.target.value))}
                  type="text"
                  placeholder="Email Address"
                />
              </div>
              <div className="form-group">
                <input
                  className="form-control"
                  value={passwordOne}
                  onChange={event => this.setState(byPropKey('passwordOne', event.target.value))}
                  type="password"
                  placeholder="Password"
                />
              </div>
              <div className="form-group">
                <input
                  className="form-control"
                  value={passwordTwo}
                  onChange={event => this.setState(byPropKey('passwordTwo', event.target.value))}
                  type="password"
                  placeholder="Confirm Password"
                />
              </div>
              <div className="form-group">
                <Button
                  type="button"
                  disabled={isInvalid}
                  bsSize="sm"
                  bsStyle="success"
                  type="submit"
                >
                  Sign Up
                </Button>
              </div>
              { error && <p>{error.message}</p> }
            </form>
          </Panel>
        </div>
      </section>
    );
  }
 }

Register.contextTypes = { setTitle: PropTypes.func.isRequired };

export default withStyles(s)(Register);

index.js

import * as firebase from 'firebase';
import { firebaseConfig } from './config';

firebase.initializeApp(firebaseConfig);

config.js

export const firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "AUT_DOMAIN",
    databaseURL: "DATABASE_URL",
    projectId: "PROJECT_ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "SENDER_ID"
}

非常感谢任何帮助。

Answer 1

在您的Firebase文件中更改以下行：

if (!firebase.apps.length) { firebase.initializeApp(config); }

就这样：

firebase.initializeApp(config)

您只是为每个应用实例初始化一个应用，即使您检查开发或生产仍然使用一个而不是同时进行，因此无需检查应用的长度。

你也得到了这个错误，因为firebase.apps是未定义的＆＃39;因为你还没有初始化任何应用程序，所以你无法检查未定义的长度。

您也可以这样实现：

if (firebase.apps === undefined) { firebase.initializeApp(config); }

Answer 2

我遇到了同样的错误。您所要做的就是更改此行：

firebase.initializeApp(firebaseConfig);

对此：

firebase.default.initializeApp(firebaseConfig);

Answer 3

您仍然应该检查长度，因为 Firebase 尝试使用完全相同的配置创建新实例，但它无法执行并引发错误。另外，请记住 Firebase 8 引入了一些重大更改：https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020

现在，如果你使用 .default，你可以让它像这样工作：

const firebase = require('firebase/app').default

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
}

Answer 4

你应该检查你正在考虑数组长度的auth.js文件。但是没有定义该数组变量。如果你发表auth.js.错误图片并未说明位置。

ReactJS firebase.initializeApp不是一个函数

4 个答案: