如何修复.default.ref不是函数?

时间:2019-05-27 10:49:30

标签: reactjs firebase

我在上传图像以存储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);
        });
    }
)

但是,每当我单击按钮时,都会引发此错误

  

“ TypeError:_config_config__WEBPACK_IMPORTED_MODULE_10 __。default.ref不是函数”

1 个答案:

答案 0 :(得分:0)

在编写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';