React - Firebase module error when i try to import 'firebase/app'

Question

I'm currently working on a mini react project and I'm encountering some errors related to the 'firebase' module.

When I try to import the firebase module I get the following error:

Module not found: Can't resolve 'firebase/app' in 'C:project_name\node_modules\re-base\dist'

Here are the dependencies of my project:

"dependencies": {
    "firebase": "^5.5.1",
    "prop-types": "^15.6.2",
    "re-base": "^4.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "react-transition-group": "^2.5.0"
},

Here is the firebase configuration file ( ./utils/firebase.js ):

import Rebase from 're-base';
import * as firebase from '@firebase/app';
import '@firebase/database';
import firebaseConfig from '../constants/database';


const firebaseApp = firebase.initializeApp( firebaseConfig );
const base = Rebase.createClass(firebase.database());

export { firebaseApp };
export default base;

Then when I try to import the firebaseApp into the App component I get this error.

import React, { Component } from 'react';
import './App.css';
import Form from './components/Form';
import Message from './components/Message';

// Firebase
import firebaseAppfrom './utils/firebase';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: {}
    }
  }

  componentDidMount() {
    base.syncState('/', {
      context: this,
      state: 'messages'
    });
  }
}

Thank you in advance for your help.

Answer 1

You're using some really old stuff here. I strongly suggest following the instructions in the documentation for adding Firebase using a module bundler .

Your dependency should be:

"firebase": "8.0.2",

Or whatever is the latest version. The one you have now is very old.

Your imports should be:

import firebase from "firebase/app";
import "firebase/database";

Don't use @ in the module names.