CODEWITHSUNDEEP
javascriptreactjsfirebase
isckraa
isckraa

Reputation: 99

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

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.

Upvotes: 0

Views: 821

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317828

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.

Upvotes: 1

Related Questions