Cannot read property 'ref' of undefined

Question

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 component.

In main.js

Vue.use(VueFire)

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

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

And in my component

// 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 component.

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, Nov 13 '17 at 01: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, Nov 13 '17 at 03:31

score 2 · Accepted Answer · answered Nov 16 '17 at 02:18

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

import Firebase from 'firebase'

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

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

Then in my component 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.

see https://stackoverflow.com/questions/35240716/webpack-import-returns-undefined-depending-on-the-order-of-imports — Evgeniy Tkachenko, Jan 23 '18 at 18:37

score 0 · Answer 2 · answered Nov 13 '17 at 05:04

0

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

import Firebase from 'firebase'

or

import * from 'firebase'

answered Nov 13 '17 at 05:04

Hareesh

6,770
4
33
60

Thanks for your help, I eventually found the answer. I posted the solution in a separate answer. – Fabrunet Nov 16 '17 at 02:19

Cannot read property 'ref' of undefined

In main.js

And in my component

2 Answers2

Linked