TypeError: firebase.storage is not a function

Question

Following this example, I keep getting the error:

 TypeError: firebase.storage is not a function

From this line in my code:

Answer 1

I was able to use firebase.storage(), but it took some time to figure it out. It only works when importing like this:

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

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

I'm serious, whenever trying to import as firebase.storage() or doing anything different it wouldn't work! Hope it helps some of you guys.

Answer 2

The firebase storage service still works (and AFAIK is not deprecated) in browsers. The firebase storage service is not available on server environments including during server-side-rendering.

This is how I've done it:

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

Then in handlers.js you can safely use the firebase storage service normally.

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

As of 4/3/2020, it seems the entire firebase suite of products is still supported in browser environments.

Source: https://firebase.google.com/docs/web/setup#namespace

Answer 3

I faced the same problem. In my case, I needed to include storage module besides Firebase core.

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

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

(npm firebase v5.0.4)

Answer 4

import * as firebase from 'firebase/app';

Then firebase.storage().ref() should work.

Hope this helps.

Answer 5

Year 2020 answer, In my case I include firebase-storage.js in .html file

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

Therefore, if you use all Firebase service, you will have

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

make sure you have added a script tag with this src in you HTML file < src="https://www.gstatic.com/firebasejs/7.12.0/firebase-storage.js" to your project

• Here 7.12.0 will be replaced with your current working version.