Firebase-js-sdk: "firebase.storage is not a function" (web)

[j-low]

[REQUIRED] Describe your environment

• Operating System version: macOS 10.12.6
• Browser version: 69.0.3497.100
• Firebase SDK version: 5.3.0
• Firebase Product: storage

[REQUIRED] Describe the problem

I am trying to implement a flow in my React web app for users to upload a profile picture from the browser client. To do this I am following the guide found here.

When I run the code (see below) I get the console error: Uncaught TypeError: firebase.storage is not a function.

Relevant Code:

Here is the function being called (the success/error callbacks are handled elsewhere but the error is being thrown on the first line):

function uploadPhoto(uid, file) {
  let storageRef = firebase.storage().ref();
  let photoRef = storageRef.child(PATH.TO.DB.FILES + uid);

  return photoRef.put(file);
}

[schmidt-sebastian]

@j-low, do you mind sharing with us how you load the Firebase SDK?

[eeerrrttty]

here im getting the error:

TypeError: __WEBPACK_IMPORTED_MODULE_2_firebase__.firestore is not a function

[eeerrrttty]

wtf, how can be that firebase is in version 5.5.2 and cannot be used with firestore together???????????? All tutorials in doc say 5.3 the firestore (even im using very well in version 5.4.2), all broke in 5.5.2.

[j-low]

@schmidt-sebastian sorry for the delay. I'm instantiating my Firebase app instance like so:

_app.ts_

import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const config:Object = {
  apiKey: "<my-api-key>",
  authDomain: "<my-auth-domain>",
  databaseURL: <my-db-url>",
  projectId: "<my-project-id>",
  storageBucket: "<my-storage-bucket>",
  messagingSenderId: "<message-sender-id>"
};

const app:firebase.app.App = firebase.initializeApp(config, '<app-name>');

export default app;

I then import it and make calls to the various services in a particular component (in this case the user profile component).

Thanks for the reply.

[schmidt-sebastian]

@eeerrrttty Can you file a separate issue if Firestore doesn't work for you?

@j-low If you want to import firebase from firebase/app your imports should look like this:

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

To use the start import, you would have to import from 'firebase': import * as firebase from 'firebase'.

[j-low]

Awesome, thanks @schmidt-sebastian.

[eeerrrttty]

i Always used

import * as firebase from 'firebase'

have to say that after updating to 5.5.2, my app stoped the firebase import saying "firebase.firestore() is not a function", just downgrading the version stops that bug.

Also i tried importing via separated imports as:

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

Are someone using vuejs with firebase 5.5.2?

[schmidt-sebastian]

@eeerrrttty Can you please open a separate issue for Firestore? I don't want to re-categorize this existing issue.

[sajeezy]

import 'firebase/storage';

I spent almost 2hours. Thank you so much

[corey-mitchell]

I'm having the same issue, "firebase.storage is not a function". Following the same doc as the OP. I'm very new to Firebase, so I can only imagine that the issue is some sort of oversight along the way.

Since I'm just doing some test cases trying out the DB on a blank HTML page, basically my entire code is as follows.

My OS is Ubuntu 16.04LTS and my SDK version is 6.2.3. If this information is needed.

<!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>

  <script>
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: <apiKey>,
      authDomain: <Domain>,
      databaseURL: <DB URL>,
      projectId: <Project ID>,
      storageBucket: <Storage Bucket>,
      messagingSenderId: <Sender ID>,
      appId: <App ID>
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    const saveImg = function(data) {
      const storageRef = firebase.storage().ref();
      storageRef.put(data).then(snapshot => {
        console.log(snapshot);
      });
    };

    saveImg(data);
  </script>

Let me know if I should open a new issue.

Edit: Typo

[schmidt-sebastian]

@corey-mitchell: For the Web SDKs that we distribute via CDN, you need to include both firebase-app and the SDKs that you are using.

In your case, this is:

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

[corey-mitchell]

Thank you @schmidt-sebastian ! This is what I get for a blind copy/paste. It clearly said in my SDK snippet to 'Add SDKs for Firebase products you want to use'. I'll make sure to actually read next time before asking.