Как исправить .default.ref не является функцией?

Question

У меня проблема с загрузкой изображения для хранения в Firebase.

Это мой конфигурационный файл firebase

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

var firebaseConfig = {
    apiKey: 'apiKey',
    authDomain: 'authDomain',
    databaseURL: 'databaseURL',
    projectId: 'projectId',
    storageBucket: 'storageBucket',
    messagingSenderId: 'messagingSenderId',
    appId: 'appId'
};

const fire = firebase.initializeApp(firebaseConfig);

const storage = firebase.storage();

export {
    storage ,fire as default
}

Я импортирую его как хранилище в свой компонент и использую как

storage.ref('images/' + this.state.imageUrl.name).put(this.state.imageUrl).on(
    'state_changed',
    (snapshot) => {},
    (error) => {
        console.log(error);
    },
    () => {
        storage.ref('images').child(this.state.imageUrl.name).getDownloadURL().then((url) => {
            console.log(url);
        });
    }
)

Но всякий раз, когда я нажимаю кнопку, появляется сообщение об ошибке

'Ошибка типа: _config_config__WEBPACK_IMPORTED_MODULE_10 __. Default.ref не является функцией'

Answer 1

при написании export {storage ,fire as default} это означает, что вы экспортируете storage как именованный экспорт и fire как экспорт по умолчанию, что эквивалентно следующему коду:

export const storage = firebase.storage();
export default firebase.initializeApp(firebaseConfig);

.необходимо исправить импорт в вашем компоненте

import {storage, default as fire} from 'config';

или

import {storage} from 'config';
import fire from 'config';