Webpack not recognizing firebase.initializeApp() function

Question

I am making a chat application with React and Firebase now, it creats an error, " TypeError: firebase__WEBPACK_IMPORTED_MODULE_0___default.a.initializeApp is not a function " I went through [this discussion][1] wherein it became pretty clear that it was related to webpack,

But I couldn't figure anything out ... I also thought of compiling it with babel, but figured out that that it would put load on the client-side which wouldn't be the best option...

My index.html has::

<script src="https://www.gstatic.com/firebasejs/7.22.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.22.1/firebase-analytics.js"></script>

My firebase.js file::

import firebase from "firebase";

 For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseApp = firebase.initializeApp = ({
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
     authDomain: "xxxxxxxx",
     databaseURL: "xxxxxxxxxxxxxx",
     projectId: "xxxxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx",
     messagingSenderId: "xxxxxxxxxxxx",
     appId: "xxxxxxxxxxxxxxx",
     measurementId: "xxxxxx"
});
firebase.initializeApp(firebaseApp);
  firebase.analytics();

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export { db, auth, storage };

Error:

    TypeError: firebase__WEBPACK_IMPORTED_MODULE_0___default.a.initializeApp is not a function
Module../src/firebase.js
E:/Final Site/UnderDev/chat/src/firebase.js:14
  11 |      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  12 |      measurementId: "xxxxxxxxxxxxxxxxxxxxxx"
  13 | });
> 14 | firebase.initializeApp(firebaseApp);
  15 |   firebase.analytics();
  16 | 
  17 | const db = firebaseApp.firestore();
View compiled
__webpack_require__
E:/Final Site/Dev/chat/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
E:/Final Site/Dev/chat/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../src/App.js
http://localhost:3000/static/js/main.chunk.js:126:67
__webpack_require__
E:/Final Site/Dev/chat/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
E:/Final Site/Dev/chat/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:499:62
__webpack_require__
E:/Final Site/Dev/chat/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
E:/Final Site/Dev/chat/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:641:18
__webpack_require__
E:/Final Site/UnderDev/chat/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
E:/Final Site/UnderDev/chat/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
E:/Final Site/Dev/chat/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:61

Thanks in advance!!

Answer 1

You're not really supposed to use both the script includes and a bundler import at the same time. Pick one or the other. If using webpack, you probably just want to remove the scripts and just use the bundler.

The Firebase documentation shows you what you have to import to use the bundler:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

You should remove your import of "firebase" and replace with what's shown here.