类型错误：firebase.storage 不是 function

Question

按照这个例子，我不断收到错误：

 TypeError: firebase.storage is not a function

从我的代码中的这一行：

var storageRef = firebase.storage().ref();

（当我只是尝试从storage guide初始化存储时，从firebase 的 npm 站点链接，我得到了同样的错误。）

在我的 Node.js 项目中，我包括以下库：

• const firebase = require('firebase');
• var admin = require('firebase-admin');
• const fs = require('fs');

到目前为止，我已经成功地能够读取和写入 firebase 数据库，使用var db = admin.database()创建对数据库的引用，然后使用var ref = db.ref("/") 。 .. 所以我知道我已经正确配置了 Firebase 和 firebase-database。 但我坚持使用storage ，并尝试了admin.storage().ref()和firebase.storage().ref()以及firebase.storage().ref("/")和相同的错误消息.

我也试过：

var storage = firbase.storage();
var storageRef = storage.ref();

和

const app = firebase.initializeApp(config);
var storage = app.storage();

并使用ref()的无效参数()和使用"/" ...但具有相同的消息，但无济于事。

我正在使用：

• “firebase”：“^3.6.4”
• “firebase-admin”：“^4.0.4”
• Node.js：v6.9.1

我必须怎么做才能成功创建对存储的引用？

Answer 1

我遇到了同样的问题。 就我而言，除了 Firebase 核心之外，我还需要包含存储模块。

import firebase from 'firebase/app';
import 'firebase/storage';  // <----

firebase.initializeApp({
  ...
});
const storageRef = firebase.storage().ref();

(npm firebase v5.0.4)

Answer 2

已弃用，见下文：

根据this answer ，在Node.js中，应使用google-cloud package storage而不是firebase storage，似乎this answer应该确认这一点。 代码示例：

npm i --save google-cloud

然后：

const gcloud = require('google-cloud')

const storage = gcloud.storage({
    projectId: '<projectID>',
    keyFilename: 'service-account-credentials.json',
});

const bucket = storage.bucket('<projectID>.appspot.com')

截至 2018 年，这是正确答案：

或者只使用包的存储部分：

npm install --save @google-cloud/storage

进而：

var storage = require('@google-cloud/storage')

另请查看文档以获取更多信息。

Answer 3

已弃用：请参阅已接受的答案。

一些需要注意的细节：

1. Firebase 存储不再与 Node.js 一起使用，因此所有文档对 Node.js 都没有用。 相反，请使用google-cloud 。 到目前为止，Firebase 和 Google Cloud 的参考和指南并未反映这一点。
2. 与 Firebase 不同，google-cloud 需要花钱，即使是小型项目也是如此。
3. 就我而言，我使用的是firebase-admin SDK，所以我现在不必搞乱用户身份验证。

---

目的

创建一个使用 Firebase 和 Google Cloud 的 Node.js 项目。 为什么？ Firebase 有一个有用的数据库和其他功能，而 Google Cloud 允许云文件存储和检索。

路线

第 1 步：项目创建

创建Firebase和Google Cloud（存储）项目。

第 2 步：安装软件包

使用npm ，在Node.js项目中安装firebase-admin和google-cloud 。

注 1：我使用了 admin SDK，因此在创建 Firebase 项目后，您需要转到：

• 设置（齿轮）>项目设置>服务帐户> Firebase Admin SDK
• 然后您：选择Node.js > [将生成的代码复制/粘贴到您的项目中] > [单击“生成新私钥”] > [将生成的json下载到首选位置] > [替换"path/to...AccountKey.json"以及您刚刚生成的密钥的路径]

注 2：生成的密钥可以在 firebase 或 google-cloud 凭据中重复使用。

第 3 步：Firebase 设置

创建项目后，导入firebase-admin sdk：

代码应如下所示，但填充了您的信息：

var admin = require("firebase-admin");
admin.initializeApp({
  credential: admin.credential.cert("/path/to/generated/json/here.json"),
  databaseURL: "database-url-from-firebase"
});

要查找 databaseURL，请转到 Firebase 中的“存储”，并记下以gs:开头的 URL，并将其复制/粘贴到 databaseURL 的值字段。

接下来，获取对您可以使用的数据库的引用：

var db = admin.database();
var ref = db.ref("/");
console.log('DB ref: ' + ref); //just to debug, if undefined, there's a problem.

要了解有关读取/写入数据库的更多信息，请遵循Firebase 自己的文档。

第 4 步：Google-Cloud 计费设置

在 Google Cloud 上创建项目后，添加结算信息； 如果没有帐单信息，则无法使用存储桶。

第 5 步：Google-Cloud Storage 设置

1. 滚动菜单（水平 3 条），单击“存储”，然后单击“启用计费”。 是的，您添加了帐单信息，现在您需要为该项目的存储桶启用它。
2. 您应该会看到您的 Firebase 项目中应该已经存在一个存储桶。
3. 再次单击菜单（3 条图标），然后 > IAM 和管理>设置
4. 在设置中，您将看到“项目 ID”，它应该类似于“projectName-00000”或“projectName-Some#”，复制该项目 ID

第 6 步：Node.js 中的 Google Cloud

在你的index.js ：

var gcloud = require('google-cloud');
var gcs = gcloud.storage({
  projectId: 'paste-that-project-id-here',
  keyFilename: 'paste-that-path-to-the-previously-downloaded-json-from-firebase-here'
});

现在您可以通过以下方式将文件发送到您的存储：

var bucket = gcs.bucket('bucket_name');
var remoteFile = bucket.file('somefile-inThisCaseASong.mp3');
var localFilename = '/Users/you/Music/somefile-inThisCaseASong.mp3';
bucket.upload(localFilename, function(err, file) {
  if (!err) {
    console.log('somefile-inThisCaseASong.mp3 is now in your bucket.');
  } else {
    console.log('Error uploading file: ' + err);
  }
});

第 7 步：验证

如果该文件在 Firebase Storage 和 Google Cloud Storage 中可见，那么您就大功告成了！

Answer 4

2020 年答案，就我而言，我在 .html 文件中包含了 firebase-storage.js

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

因此，如果您使用所有 Firebase 服务，您将拥有

<script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-firestore.js"></script>  
<script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-messaging.js"></script>  
<script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-storage.js"></script>  


<!-- your script calling Firebase Firestore under this line -->
<script> 
....
</script>

Answer 5

将 Storage 与 Firebase 结合使用时，您无法在免费层添加存储桶是正确的。 但是，默认情况下您确实会获得一个存储桶（只有一个）。 我（最终）成功的方法是：

1. 将存储添加到我在 Firebase 中的项目（不是 Google Cloud）

2. 添加 Admin SDK 并根据 Google Docs 设置必要的服务帐户： https : //firebase.google.com/docs/admin/setup? authuser =1

3. 根据使用带有存储的 Admin SDK 的说明添加@google-cloud/storage包：https ://firebase.google.com/docs/storage/admin/start?authuser=1

4. 初始化应用程序：

    admin.initializeApp({ credential: admin.credential.cert("/path/to/generated/json/here.json"), storageBucket: "folder-URL-from-Storage-page-excluding-gs://" });

5. 使用（来自 Admin SDK 文档）访问存储桶对象：

   const bucket = admin.storage().bucket();

6. 使用存储库对存储桶进行操作。 例子：

    bucket.upload('/path/file.ext', function(err, file, apiResponse) { //Do Stuff });

注意：我花了几个小时确信它不起作用，因为我没有存储桶，但结果证明我的错误是在初始化时将gs://在存储桶的路径中。

Answer 6

我遇到了同样的问题，我的代码如下：

import * as firebase from "firebase/app";
import 'firebase/storage';

firebase.initializeApp({
  ...
});
const storageRef = firebase.storage().ref();

所以，我发现只有当你使用Typescript 时才会这样做。

如果您只使用ES6 ，那么您必须：

import firebase from 'firebase/app';
import 'firebase/storage';

firebase.initializeApp({
  ...
});
const storageRef = firebase.storage().ref(); 

如果你使用ES5 ，那么你必须：

var firebase = require("firebase/app");
require("firebase/storage");

firebase.initializeApp({
  ...
});
const storageRef = firebase.storage().ref();

此外，您也可以使用以下方式，但不推荐使用，因为您加载了所有服务（数据库、身份验证、存储等）：

import firebase from "firebase";

firebase.initializeApp({
  ...
});
const storageRef = firebase.storage().ref();

使用 Firebase 7.15.2 测试

Answer 7

更新版本 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// Set the configuration for your app
// TODO: Replace with your app's config object
const firebaseConfig = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket-url>'
};
const firebaseApp = initializeApp(firebaseConfig);

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage(firebaseApp);

资料来源： https://firebase.google.com/docs/storage/web/start

Answer 8

确保您在 HTML 文件< src="https://www.gstatic.com/firebasejs/7.12.0/firebase-storage.js" 中添加了带有此 src 的脚本标记到您的项目

• 此处7.12.0将替换为您当前的工作版本。

Answer 9

我可以使用 firebase.storage()，但花了一些时间才弄明白。 它仅在像这样导入时有效：

//Importing
const firebase = require('firebase')
require('firebase/storage')

//Calling the function (You can call it normally then)
const storageRef = firebase.storage().ref();

我是认真的，每当尝试导入为 firebase.storage() 或做任何不同的事情时，它都行不通！ 希望对你们中的一些人有所帮助。

Answer 10

我认为 firebase 的 V9 有一种不同的方式让我们使用它的存储。 要使用 firebase 存储，您可以将存储导入为 -

import { getStorage } from "firebase/storage";

现在你可以按照这个 -

const firebaseApp = firebase.initializeApp(firebaseConfig);

const storage = getStorage(firebaseApp);

Answer 11

如果你尝试像下面那样做，它会改变吗？

// Initialize the default app:
const app = firebase.initializeApp(appConfig)

// Initialize storage from the *app* object:
const storage = app.storage()

从文档来看，这似乎是一种替代方法。 我更喜欢这个，因为它将存储链接到应用程序，使代码更具可读性和功能

Answer 12

看起来他们已经在新版本的库中修复了它。 只需在相关包上运行npm update就可以了。

Answer 13

我在本地测试我的应用程序时遇到了同样的问题，但在部署项目时一切正常。

这样，我实际上使用了以下解决方法：

if (!firebase.storage) {
    // prevent crash when working locally
    return;
}
let ref = firebase.storage().ref()
// perform production stuff ...

这有点好奇，但它适用于我的情况。

Answer 14

firebase 存储服务在浏览器中仍然有效（并且 AFAIK 没有被弃用）。 firebase 存储服务在服务器环境中不可用，包括在服务器端渲染期间。

这是我如何做到的：

// only import uploadHandler client-side.
const uploadHandler = typeof window === 'object' ? require('./handlers').imageHandler : () => false; // ssr only

然后在handlers.js您可以安全地正常使用 firebase 存储服务。

import * as firebase from 'firebase'
const storageRef = firebase.storage().ref();
const bucketObjectRef = storageRef.child('myFile.jpg');

截至 2020 年 4 月 3 日，浏览器环境似乎仍支持整个 firebase 产品套件。

来源： https : //firebase.google.com/docs/web/setup#namespace

Answer 15

我在浏览器（webapp）上集成firebase的存储时遇到了类似的问题

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

只需添加该行，错误就消失了！

Answer 16

在 app.module 中import firebase from 'firebase/app' firebase import firebase from 'firebase/app'初始化import firebase from 'firebase/app' firebase ； import 'firebase/storage' ；

firebase.storage();

Answer 17

从'firebase/app'导入*作为firebase；

然后 firebase.storage().ref() 应该可以工作。

希望这可以帮助。