export "firebase/storage" and "firebase/firestore" in one file

I have a problem when I want to export both objects of my firebase.js file I got this error:

TypeError: Cannot read properties of undefined (reading 'ref')

firebase.js

import firebase from "firebase";
import "firebase/storage";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: ....
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}
var storage = firebase.storage();
var firestore = firebase.firestore();

export default { storage, firestore };

upload.js

  import React, { useState } from "react";
  import { storage } from "../lib/firebase";

  function account() {
    const [image, setImage] = useState("");
    const upload = () => {
      if (image == null) return;
      storage
        .ref(`/images/${image.name}`)
        ....
    };

    return (
      <div>
        <Upload />
      </div>
    );
  }

  export default account;

If I export only the storage and import it in my upload.jsfile it works. What is the different?

CodePudding user response：

if you to try import per module. It should be something like this.

firebase.js

import firebase from "firebase";
import "firebase/storage";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: ....
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}
var storage = firebase.storage();
var firestore = firebase.firestore();

export { storage, firestore };

upload.js

import React, { useState } from "react";
  import { storage, firestore } from "../lib/firebase";

  function account() {
    const [image, setImage] = useState("");
    const upload = () => {
      if (image == null) return;
      storage
        .ref(`/images/${image.name}`)
        ....
    };

    return (
      <div>
        <Upload />
      </div>
    );
  }

  export default account;

Hopefully can help you!