I'm building a simple web app with Vue + Firebase + Vuefire and I get "Uncaught TypeError: Cannot read property 'ref' of undefined" when I try to use my Firebase db variable inside a ponent.

In main.js

Vue.use(VueFire)

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

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

And in my ponent

// 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"
  }
}

I followed the steps in this tutorial /

This code db.ref('recipes') works if used inside main.js, but it never works once I import it inside my ponent.

I'm building a simple web app with Vue + Firebase + Vuefire and I get "Uncaught TypeError: Cannot read property 'ref' of undefined" when I try to use my Firebase db variable inside a ponent.

In main.js

Vue.use(VueFire)

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

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

And in my ponent

// 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"
  }
}

I followed the steps in this tutorial https://alligator.io/vuejs/vuefire-firebase/

This code db.ref('recipes') works if used inside main.js, but it never works once I import it inside my ponent.

• javascript
• firebase
• vue.js
• vuejs2
• vuefire

Share Improve this question Follow edited Nov 12, 2017 at 21:03 Fabrunet asked Nov 12, 2017 at 21:02 FabrunetFabrunet 6911 gold badge11 silver badge77 bronze badges 2

• The immediate difference I see between your code and the tutorial is that you're including the .js extension when importing. Perhaps you should try omitting that and instead use import {db} from '../main'. Granted, I've never used the importing or exporting, so I can't say whether or not this will remedy your problem. – B. Fleming Commented Nov 13, 2017 at 1:25
• Good observation. I never noticed it could work without the .js extension. I gave it a try, the path still works, but I have the same error. – Fabrunet Commented Nov 13, 2017 at 3:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The problem was my Firebase code (including db variable) was inside main.js but it needed to be in it's own ponent. I created a firebase.js file :

import Firebase from 'firebase'

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

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

Then in my ponent I simply imported my database variable :

import {db} from '../firebase'

Why didn't it work inside main.js? I'm not sure, maybe someone more knowledgeable can answer that.

.ref is a firebase function, you need to import it. try

import Firebase from 'firebase'

or

import * from 'firebase'