next.js firebase error .a.storage is not a function

Question

using next.js.
I want to use firebase's cloudStorage to retrieve images.
I've imported firebase into next.js, but I'm getting an error.
The version of firebase is 8.2.7.
var storage = firebase.storage(); in place of I get a TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_2___default.a.storage is not a function error.

import 'firebase/analytics';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import React, { FunctionComponent } from 'react';

const Gallery: FunctionComponent = () => {
  var firebaseConfig = {
    apiKey: '***************',
    authDomain: '*************',
    projectId: '*************',
    storageBucket: '*************',
    messagingSenderId: '*************',
    appId: '*************',
    measurementId: '*************',
  };
  // Initialize Firebase
  if (firebase.apps.length === 0) {
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  }
  var storage = firebase.storage();
  var storageRef = storage.ref();
  var listRef = storageRef.child('files/uid');
  listRef
    .listAll()
    .then(function (res) {
      res.prefixes.forEach(function (folderRef) {
      });
      res.items.forEach(function (itemRef) {
      });
    })
    .catch(function (error) {});
  return (
    <div>
      <div>aaaa</div>
    </div>
  );
};

export default Gallery; 

Answer 1

It seems that you don't import the Cloud Storage SDK. Do as follows:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';   // <-- See the addition here

More info in the doc .