Webpack无法识别firebase.initializeApp()函数

Question

我现在正在用React和Firebase制作一个聊天应用程序，它会产生一个错误，"类型错误：firebase__WEBPACK_IMPORTED_MODULE_0___default.a.initializeApp不是函数"我经历了[这次讨论][1]，其中很明显它与webpack、有关

但我什么都想不通。。。我也想过用babel编译它，但我发现它会在客户端加载，这不是最好的选择。。。

我的index.html有：：

<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>

我的firebase.js文件：：

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 };

错误：

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

提前感谢！！

Answer 1

实际上不应该同时使用脚本includes和bundlerimport。选择其中一个。如果使用webpack，您可能只想删除脚本并使用bundler。

Firebase文档向您展示了使用捆绑器必须导入的内容：

// 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";

您应该删除"；"火球"；并替换为此处显示的内容。