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

sckraa

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.

Doug Stevenson

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Import error when I try use "requests" module

error when I try import DropDown react-native

Python in powershell is giving me an import error when I try to import the module called urlib

Why when i´m trying to write in Firebase Database I got this error? Related with FirebaseApp$IdTokenListener

I keep getting an error when I try to import tkFileDialog

Internal server error in flask application when I try to import pandas

I get an Error when I try to use Firebase Auth

Google Speech Recognition module throws error when I try it out

Error when I try to execute a script: ImportError: No module named tools

firebase show error when i try to run functions locally

When I try to use firebase in my flutter app it produces an error

When i try to create react project i get error

Getting error when I import LoginBackEnd module into settings.py

Error when I import .css file from node-module

react native custom framework, import is not working as it should when i try to import framework into demo app

ModuleNotFoundError is raised when I try to import a module that is in my current working directory

Pycharm says No module named 'kivy' when I try to import it eventhough Kivy works on IDE

"Cannot use import statement outside a module" got message when I try to mocha

Import Error when trying to import NLTK module

I am getting "Uncaught ReferenceError: firebase is not defined" error when i try to read my datas on Firebase

error message Missing required dependencies, import error: Missing required dependencies ['numpy' ] when I try and freeze an executable

I get Metadata.framework error when I try to import an image

how to fix the error in Jupyter notebook which which i see when i try to import any thing

Error when try to import URL Json to Excel

Error when try to import axios on iOS platform

Failed to compile node module when i try to export db from firebase

when i try to run my project i get the error that says no module named flask

I get a 'No module named 'alpha_vantage'' error when i try importing alpha_vantage on Spyder

When I try to make migrations in django I get an error of undefined DJANGO_SETTINGS_MODULE