Cannot read property 'ref' of undefined - javascript

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

.ref is a firebase function, you need to import it. try
import Firebase from 'firebase'
or
import * from 'firebase'

Related

Is it possible to use route.meta property outside of the component?

I am using Vue 3 in my project and I used route.meta property inside the Vue component but when I moved that into .ts file it doesn't work anymore and in-browser appeared an error.
My .ts file:
import { useRoute } from "vue-router";
import { computed } from "vue";
const route = useRoute();
export const myfunction = computed(() => {
return route.meta.somedata;
});
Error from the browser:
Uncaught (in promise) TypeError: Cannot read property 'meta' of undefined
The same code works fine in .vue files.
Is there any way to use meta property outside of the .vue file?
I found a solution, firstly need to import the router file.
import router from "#/router/index";
Then using the router object we can get currentRoute.value and then access meta properties.
router.currentRoute.value.meta.someData
The final code should look like this:
import { computed } from "vue";
import router from "#/router/index";
export const myfunction = computed(() => {
return router.currentRoute.value.meta.someData;
});

javascript export * gives index.js:10 Uncaught ReferenceError: exports is not defined

I have a JS project and trying to use Redux. I created index.js file, but I'm getting an error index.js:10 Uncaught ReferenceError: exports is not defined
import { combineReducers } from 'redux';
import userDataReducer from './userData/reducers';
//export { updateSelectedSections } from './userData/actions';
export * from './userData/actions';
export const rootReducer = combineReducers({
userData: userDataReducer,
});
If I use that comment line everything works. What's more interesting I copied the same code from my previous Typescript project where it works. I assume it has something to do with JS?

How nameless import and export work in JS

We was learning Firebase and the way to connect it with React. Later, I saw the this code snippet:
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
I face some confusion on the above code thus wanted ask one question. Firstly, how is it possible that
import 'firebase/firestore';
import 'firebase/auth';
get attached to firebase variable automatically, that is, by using firebase we have access to app, firestore and auth since imports of firestore and auth do not have name
import 'firebase/firestore';
This means "run the code in firebase/firestore, and i don't care if it exports anything"; The code that it's running is this file here, and part of what that code does is import firebase from #firebase/app and register itself with it. You import that same firebase object, so anything that was added to the object is available to you too.
The lines of code they use to add firestore to firebase are these:
export function registerFirestore(instance: FirebaseNamespace): void {
configureForFirebase(instance);
instance.registerVersion(name, version);
}
registerFirestore(firebase);
Understanding exactly what those are doing will require walking through their codebase to see what's being called (it ends in this function), but i can demonstrated a simplified equivalent like this:
// File 1, the equivalent of firebase/app
export default {}; // no properties on it.
// File 2, the equivalent of firebase/firestore
import firebase from 'firebase/app'
// mutating the object that was imported
firebase.firestore = "I'm firestore!";
// Your file
import firebase from 'firebase/app';
import 'firebase/firestore';
console.log(firebase.firestore); // logs out "I'm firestore!", because the second import added a property to the object.

How to import Vuex Store into external JS file

Im trying to import the Vuex Store to my JS Api client but i keep getting this error;
Uncaught (in promise) TypeError: _store__WEBPACK_IMPORTED_MODULE_15__.default.commit is not a function
I import it like this;
import Store from '../store/login'
import { mapActions } from 'vuex'
And i want to mutate my JWT token and use commit like this
Store.commit('jwtRefresh', { jwt })
My console also logs this exact line of code as the error.
Any suggestions?

firebase.auth.EmailAuthProvider is undefined

This is how I import firebase into the project:
import firebase from 'firebase/app'
import firestore from 'firebase/firestore'
import auth from 'firebase/auth'
/*
Config */
const FIREBASE_CONFIG = {
...
}
/*
Get a Firestore instance */
export const firebaseInstance = firebase.initializeApp(FIREBASE_CONFIG)
Later I would just:
import { firebaseInstance } from 'database' whenever it's needed and have to access singup, login and other available API methods like for example:
firebaseInstance.auth().fetchSignInMethodsForEmail(email)
However when I am trying
firebaseInstance.auth.EmailAuthProvider as defined in the official documentation it's simply not available and returns undefined
Can somebody please suggest what can be missing?
P.S: I've tried firebaseInstance.auth().EmailAuthProvider however after researching in github thread how other people do it, I believe that is not the thing :)
Documentation says it's static method, so it doesn't make sense to call it on instance? You can find it under firebase.auth.EmailAuthProvider

Categories