javascript - ReactJS firebase.initializeApp 不是函数

Question

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

之前我遇到了长度未定义的问题，由于在初始化 Firebase 时删除了对应用程序长度的检查，该问题得到了解决。但是现在我收到了 firebase.initializeApp is not a function 错误。

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

我已经删除了访问 Firebase 提供的方法的所有多余步骤，现在只使用直接从 Firebase 提供的方法。 (请参阅帖子的版本历史记录。)

我当前的代码设置如下:

注册.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.initializeApp(firebaseConfig);

对此:

firebase.default.initializeApp(firebaseConfig);