TypeError: firebase.initializeApp is not a function

Question

I'm trying to make a signUp and signIn site in React, and I have added the Firebase library using npm install --save firebase
I am trying to connect my app with firebase, but I am not having much joy:

import React, { Component } from "react";
var firebase = require("firebase");
var uuid = require("uuid");

var firebaseConfig = {
  apiKey: "AIzaSyCWUBB9SgYhzOntmoJl4S7wmz6VvuyjMGA",
  authDomain: "basic-bfd76.firebaseapp.com",
  databaseURL: "https://basic-bfd76-default-rtdb.firebaseio.com",
  projectId: "basic-bfd76",
  storageBucket: "basic-bfd76.appspot.com",
  messagingSenderId: "616743515298",
  appId: "1:616743515298:web:91293dec0f3568e2b393fb",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

class Usurvey extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: uuid.v1(),
      studentName: "",
      answers: {
        answers1: "",
        answers2: "",
        answers3: "",
      },
      isSubmitted: false,
    };
  }
  render() {
    var studentName;
    var question;

    if (this.state.studentName === "" && this.state.isSubmitted === false) {
      studentName = (
        <div>
          <h1>Hey Student, please let us konw your name: </h1>
          <form>
            <input type="text" placeholder="Enter your name: " ref="name" />
          </form>
        </div>
      );
    }
    return (
      <div>
        <h1>Hello i'm from usurvy</h1>
      </div>
    );
  }
}
export default Usurvey;

And i get this error:

TypeError: firebase.initializeApp is not a function Module. C:/Users/alami/OneDrive/Desktop/MERN stack/Reacts project/basic/src/Usurvey.js:15 12 | appId: "1:616743515298:web:91293dec0f3568e2b393fb", 13 | }; 14 | // Initialize Firebase 15 | firebase.initializeApp(firebaseConfig); 16 | 17 | class Usurvey extends Component { 18 | constructor(props) { View compiled
Any suggestions please?

Can you try it in the way it's mentioned in the documentation? — Dharmaraj
– Dharmaraj, Commented Jan 30, 2021 at 9:06

Joe · Accepted Answer · 2021-01-30 12:21:37Z

2

Documentation says that you need to call 'firebase/app' not just 'firebase'. Webpack can't find the module can't find it because of this.

const firebase = require("firebase/app");
// or import firebase from "firebase/app";

Also double check that Firebase is definitely installed in the node_modules. Check your package.json that it's 100% there as a dependency. Try re-installing it.

answered Jan 30, 2021 at 12:21

Joe

9681 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alamin Over a year ago

Joe thanks, problem solved actually, I have some change import firebase from 'firebase' that's it.

Sajib saha · Accepted Answer · 2021-01-30 12:41:12Z

0

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

for more info go this link

answered Jan 30, 2021 at 12:41

Sajib saha

3914 silver badges18 bronze badges

1 Comment

Alamin Over a year ago

Thank you, I have used ES6. so, there will be import firebase from 'firebase'

Collectives™ on Stack Overflow

TypeError: firebase.initializeApp is not a function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related