base.database() is not a function error in firebase with react

Question

I've gotten the authentication portion of my app to work with Google, but I'm having trouble getting a snapshot of the database data to work with after that.

I'd like to log in, gather user information, and if there is no owner of the data then set the current user as the owner.

Here is the authentication snippet

  login() {
    auth.signInWithPopup(provider)
      .then((result) => {
        const user = result.user;
        this.setState({
          user
        });
    });
    const storeRef = base.database().ref(this.props.storeId);
    storeRef.once("value")
      .then((snapshot) => {
        const data = snapshot.val() || {};
        if(!data.owner) {
          storeRef.set({
            owner: this.user
          });
        }
    });
  }

And the full component

import React from 'react';
import AddFishForm from './AddFishForm';
import PropTypes from 'prop-types';
import base, { auth, provider } from '../base';
import * as firebase from 'firebase';

export default class Inventory extends React.Component {
  constructor() {
    super();
    this.renderInventory = this.renderInventory.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.renderLogin = this.renderLogin.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.state = {
      user: null,
      owner: null
    }
  }

  handleChange(e, key) {
    const fish = this.props.fishes[key];
    const updatedFish = {
      ...fish,
      [e.target.name]: e.target.value
     }
     this.props.updateFish(key, updatedFish);
  }

  login() {
    auth.signInWithPopup(provider)
      .then((result) => {
        const user = result.user;
        this.setState({
          user
        });
    });
    const storeRef = base.database().ref(this.props.storeId);
    storeRef.once("value")
      .then((snapshot) => {
        const data = snapshot.val() || {};
        if(!data.owner) {
          storeRef.set({
            owner: this.user
          });
        }
    });
  }

  logout() {

  }

  renderLogin() {
    return (
      <nav className="login">
        <h2>Inventory</h2>
        <p>Sign in to manage your store's inventory</p>
        <button className="facebook" onClick={() => this.login()}>
          Log in with Google</button>
      </nav>
    )
  }

    renderInventory(key) {
      const fish = this.props.fishes[key];
        return(
            <div className="fish-edit" key={key}>
                <input type="text" name="name" value={fish.name} placeholder="Fish Name"
                  onChange={(e) => this.handleChange(e, key)} />
                <input type="text" name="price" value={fish.price} placeholder="Fish Price"
                  onChange={(e) => this.handleChange(e, key)} />
                <select type="text" name="status" value={fish.status} placeholder="Fish Status"
                  onChange={(e) => this.handleChange(e, key)}>
                  <option value="available">Fresh!</option>
                  <option value="unaivilable">Sold Out!</option>
                </select>
                <textarea type="text" name="desc" value={fish.desc} placeholder="Fish Desc"
                  onChange={(e) => this.handleChange(e, key)}></textarea>
                <input type="text" name="image" value={fish.image} placeholder="Fish Image"
                  onChange={(e) => this.handleChange(e, key)}/>
                <button onClick={() => this.props.removeFish(key)}>Remove Fish</button>
            </div>
        );
    }

    render() {
      const logout = <button>Log out!</button>

      if(!this.state.uid) {
        return <div>{this.renderLogin()}</div>
      }
      if(this.state.uid !== this.state.owner) {
        return(
          <div>
            <p>Sorry, you are not the owner of this store!</p>
            {logout}
          </div>
        )
      }
        return(
            <div>
                <h2>Inventory</h2>
                {logout}
                {Object.keys(this.props.fishes).map(this.renderInventory)}
                <AddFishForm addFish={this.props.addFish} />
                <button onClick={this.props.loadSamples}>Load Sample Fishes</button>
            </div>

        )
    }
}

Inventory.propTypes = {
updateFish: PropTypes.func.isRequired,
fishes: PropTypes.object.isRequired,
removeFish: PropTypes.func.isRequired,
addFish: PropTypes.func.isRequired,
loadSamples: PropTypes.func.isRequired,
storeId: PropTypes.string.isRequired
}

Also firebase object as base if needed

import Rebase from 're-base';
import * as firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
  authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
  projectId: "catch-of-the-day-ethan-fie",
  storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});

const base = Rebase.createClass(app.database());

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export default base;

Answer 1

For me in recent update I solved it using

var firebase = require('firebase/app');
require('firebase/database');

Answer 2

your using Rebase instance not firebase instance , to fix your problem export firebase instance from you initialization code

import Rebase from 're-base';
import * as firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
  authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
  projectId: "catch-of-the-day-ethan-fie",
  storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});

const base = Rebase.createClass(app.database());

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const firebase = app;    //   <------ export firebase
export default base;

and in your component import firebase

import base, { auth, provider , firebase } from '../base';

and now use firebase instead of base

const storeRef = firebase.database().ref(this.props.storeId);
storeRef.once("value")
  .then((snapshot) => {
    const data = snapshot.val() || {};
    console.log(data);
    if(!data.owner) {
      storeRef.set({
        owner: this.user
      });
    }
});