정의되지 않은 속성 'ref'를 읽을 수 없습니다.

정의되지 않은 속성 'ref'를 읽을 수 없습니다.

Vue + Firebase + Vuefire로 간단한 웹 앱을 만들고 있는데 컴포넌트 내에서 Firebase DB 변수를 사용하려고 하면 "Uncatched TypeError: Cannot read property 'ref' of undefined"라는 메시지가 나타납니다.

in main.js

Vue.use(VueFire)

const firebaseApp = Firebase.initializeApp({ //setting })

// Export the database for components to use.
export const db = firebaseApp.database()

그리고 내 컴포넌트에는

// in Recipes.vue
import {db} from '../main.js'

export default {
  recipe: {
    source: db.ref('recipes')
    // Console says: "Uncaught TypeError: Cannot read property 'ref' of undefined"
  }
}

저는 이 튜토리얼의 순서를 따랐습니다.https://alligator.io/vuejs/vuefire-firebase/

이 코드db.ref('recipes')main.js 내에서 사용하면 동작하지만 컴포넌트 내에서 Import하면 동작하지 않습니다.

문제는 내 Firebase 코드(db 변수 포함)가 내부에 있다는 것이었다.main.js자기 부품 안에 있어야만 했어요작성했습니다.firebase.js파일:

import Firebase from 'firebase'

const firebaseApp = Firebase.initializeApp({
  # configuration
})

// Export the database for components to use.
export const db = firebaseApp.database()

그런 다음 컴포넌트에서 데이터베이스 변수를 Import하기만 하면 됩니다.

import {db} from '../firebase'

왜 안에서는 안 되지?main.js글쎄요, 좀 더 박식한 사람이 대답할 수 있을 거예요.

.ref파이어베이스 함수이므로 Import해야 합니다.해 보세요.

import Firebase from 'firebase'

또는

import * from 'firebase'

언급URL : https://stackoverflow.com/questions/47253938/cannot-read-property-ref-of-undefined