Uncaught TypeError: firebase.storage is not a function

Question

I am trying to create a reference to my firebase storage but I am getting the error: Uncaught TypeError: firebase.storage is not a function. How can I solve this?

There is a similar question where node is used, but in my case I am not using node and hence I don't know if the answer will solve my problem.TypeError: firebase.storage is not a function

My code is shown below:

In my app.js:

console.log("Initialisation Successful!");
var db = firebase.firestore();
var storage = firebase.storage();
var storageRef = storage.ref();
var imagesRef = storageRef.child('Images');


function addExerise(){
    var exerciseName = document.getElementById("ename").value;
    var exercisePart = document.getElementById("body_part").value;
    var exerciseLevel = document.getElementById("elevel").value;
    var file = document.getElementById("eimage");
    console.log(file);

    file.addEventListener('change', function(evt) {
      let imageFile = evt.target.files[0] // upload the first file only
      let uploadTask = imagesRef.put(imageFile)
  })



    /*var file = storageRef.child(file.name);
    ref.put(file).then(function(snapshot) {
         alert("File Uploaded")
         console.log('Uploaded a blob or file!');
      });*/


    db.collection("Exercises").add({
        Name: exerciseName,
        bodyPart: exercisePart,
        Level: exerciseLevel,
        //image: file

    })
    .then(function(){
        console.log("Data entered successfully!");
    })
    .catch(function(error){
        console.error("Error!", error);
    });
}

Firebase Initialisation in my html page:

<!--Firebase-->
            <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
            <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js"></script>

            <script>
                var firebaseConfig = {
                    apiKey: "############################",
                    authDomain: "########.firebaseapp.com",
                    databaseURL: "###########.firebaseio.com",
                    projectId: "#############",
                    storageBucket: "gs://##########.appspot.com",
                    messagingSenderId: "##############",
                    appId: "###############################"
                  };
                // Initialize Firebase
                firebase.initializeApp(firebaseConfig);
            </script>
            <script src="app.js"></script>
        <!--/Firebase-->

Solved:

Added the line below in my html.

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

add https://www.gstatic.com/firebasejs/7.0.0/firebase-storage.js — shrys
In the future, please do a web search for the error message before posting to Stack Overflow. This is a very common problem and I suspect you would have found the solution very quickly. — Doug Stevenson

RufusALyme RufusALyme · Accepted Answer · 2019-09-30T12:52:45

In your Firebase console, have you added the Storage service and regenerated the initialization code to put into your HTML? I see that you have the firebase-app.js and firebase-firestore.js scripts added, but it looks like you don't have one for storage. Perhaps adding that service and added the relevant script to your HTML will fix the problem.

Edit: Adding firebase-storage.js will fix the issue:

console.log(firebase.storage);

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

Uncaught TypeError: firebase.storage is not a function

1 Answers