I'm using Nuxt.js and I want to add my data on Firebase. When I click add button, it returns an error
Error is :
Cannot read properties of undefined (reading 'collection')
this is my add method:
addList(value) {
try {
this.$fire.firestore.collection('toDoList').doc('id123').set({
name: value.name,
job:value.job
})
} catch (error) {
console.log(error);
}
}
I added firebase library in my project
how can I solve this problem ?
full error:
TypeError: Cannot read properties of undefined (reading 'collection')
at VueComponent.addList (index.vue?6ced:43:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:3015:1)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:1813:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:3015:1)
at Vue.$emit (vue.runtime.esm.js?2b0e:3714:1)
at VueComponent.sendData (ToDoForm.vue?1e1a:41:1)
at click (ToDoForm.vue?dbf7:69:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:3015:1)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:1813:1)
at original_1._wrapper (vue.runtime.esm.js?2b0e:7458:1)
Related
I am trying to troubleshoot what I suspect might be a hydration issue (not sure).
First, when I run my Nuxt 3 app locally, I get the following server error:
[nuxt] [request error] Cannot read properties of undefined (reading 'public_id')
at _sfc_ssrRender (/C:/Users/XXX/Desktop/work/XXX/.nuxt/dist/server/server.mjs:36425:25)
The template code for the above error is referenced here:
/pages/post/[id]/index.vue:
<img
:src="
post.data.public_id //<----- the 'public_id' error referenced above
? config.public.cloudinaryBaseURL +
config.public.cloudinaryCloudName +
'/c_scale,f_auto,q_auto:best,w_900/' +
post.data.public_id
: '/images/placeholder.svg'
"
:alt="post.data.title"
class="img-fluid rounded-0 rounded-top"
style="border-top-right-radius: 0% !important"
/>
Commenting the above code out of the template, the error then jumps to the next line in the template code:
<figcaption class="figure-caption flex-grow me-auto">
{{ post.data.caption }} //<---- error jumps here after the above code commented out
</figcaption>
Locally, the above error is not a problem....the app works fine. Deploying to production, the page works but when you refresh the page, the error is a little different and the app's console says:
TypeError: Cannot read properties of null (reading 'data')
at Proxy.<anonymous> (index-fcf8af7d.mjs:1:11056)
at Ja (entry-52e152da.mjs:4:4370)
at $e (entry-52e152da.mjs:4:38329)
at $o.U [as fn] (entry-52e152da.mjs:4:38418)
at $o.run (entry-52e152da.mjs:1:4900)
at B.d.update (entry-52e152da.mjs:4:38728)
at B (entry-52e152da.mjs:4:38754)
at entry-52e152da.mjs:4:8797
Data is being fetched using server route api like so:
/pages/post/[id]/index.vue:
const { data: post } = await useFetch(`/api/posts/${route.params.id}`, {
initialCache: false
})
/server/api/posts/[id].ts:
import { firestore } from '#/server/utils/firebase'
export default defineEventHandler(async (event) => {
const postRef = firestore.doc(`posts/${event.context.params.id}`)
const snapshot = await postRef.get()
if (!snapshot.exists) {
return {
statusCode: 404,
body: JSON.stringify({
message: 'Post not found'
})
}
} else {
const data = snapshot.data()
return {
data
}
}
})
Does anyone have any advice on how I can fix the above error? Is there a better way to call the server route to alleviate this error?
error: Error: Unable to resolve module ahoefa11.png from Screens\HomeScreen.js: ahoefa11.png could not be found within the project.
this my code
import storage from '#react-native-firebase/storage';
storage()
.ref('ahoefa11.png')
.getDownloadURL().then((url) => {
console.log(url);
});
const images = [
require('ahoefa11.png'),
require('../assets/du1.jpg'),
require('../assets/du2.jpg'),
require('../assets/du3.jpg'),
];
this is my code im trying to take the image ahoefa11.png from firebase storage and use it in my homescreen
1) Check out how to get a download url correctly: ( from https://firebase.google.com/docs/storage/web/download-files?authuser=0)
First, create a storage reference:
var storage = firebase.storage();
var storageRef = storage.ref();
Then, Create a reference to the file you want to download:
var starsRef = storageRef.child('images/stars.jpg');
Finally, Get the download URL, in the 'then' You recieve a url, and you can catch errors as well:
starsRef.getDownloadURL().then(url => {
<insert here whatever code you would like, url is the image link)
}).catch(error => {
<catch errors here if you want>
}
2) Your error says:
error: Error: Unable to resolve module ahoefa11.png from
Screens\HomeScreen.js: ahoefa11.png could not be found within the
project.
It means that the path to ahoefa11.png file in images array is incorrect.
If this image is also in assets folder, images array should look like:
const images = [
require('../assets/ahoefa11.png'),
require('../assets/du1.jpg'),
require('../assets/du2.jpg'),
require('../assets/du3.jpg'),
]
Am getting this error after following the steps mentioned in the nativescript-plugin-firebase readme file.
JS: firebase.init error: TypeError: Cannot read property 'database' of
undefined
https://github.com/EddyVerbruggen/nativescript-plugin-firebase
but i dont really understand nor do i know how to solve that.
the version of the plugin am using is : 6.4.0
with tns 4.1.2
EDIT: init code, from app.js
var firebase = require("nativescript-plugin-firebase");
firebase.init({ persist: true
// Optionally pass in properties for database, authentication and cloud messaging,
// see their respective docs.
}).then(
function (instance) {
console.log("firebase.init done");
},
function (error) {
console.log("firebase.init error: " + error);
}
);
I finally solved it by installing the plugin manually via the CLI (i initially installed it through NativeScript sidekick) apparently they didnt take in count the fact that some plugins may require some user inputs, to do write specific config file (which nativescript-plugin-firebase), so by installing it manually i got to provide the user input needed, it got configured and it worked!
Below is the hook code that I want to use to manipulate the submitted values from QuickForm.
var hooksObject = {
before: {
insert: function(doc) {
console.log(doc);
return doc;
}
}
};
AutoForm.addHooks('insertBankDetailForm', hooksObject, true);
I have read the docs and it says "These calls should be anywhere in top-level client code and do not need to be within Meteor.startup. You should not put them in an autorun, template rendered function, or anywhere else where they will be called multiple times since that will cause the hooks to run multiple times for a single submission."
I tried placing the code most of the places, but I am unable to understand the location where it need to be kept. I get below error when I use above code in index.js at location D:\PROJECT\imports\startup\client\index.js
Error: Oops! Did you forget to return the modified document from your docToForm hook for the insertBankDetailForm form?
at autoFormEachDocToForm (aldeed_autoform.js?hash=62240ad…:6595)
at Array.forEach (<anonymous>)
at Function._.each._.forEach (underscore.js?hash=cde485f…:149)
at Blaze.View.<anonymous> (aldeed_autoform.js?hash=62240ad…:6592)
at blaze.js?hash=f33d3df…:1934
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3df…:3744)
at blaze.js?hash=f33d3df…:1932
at Object.Blaze._withCurrentView (blaze.js?hash=f33d3df…:2271)
at viewAutorun (blaze.js?hash=f33d3df…:1931)
at Tracker.Computation._compute (tracker.js?hash=997515f…:339)
meteor.js?hash=27829e9…:930 Exception from Tracker recompute function:
meteor.js?hash=27829e9…:930 TypeError: Cannot read property 'setMembers' of undefined
at doMaterialize (blaze.js?hash=f33d3df…:2093)
at Object.Tracker.nonreactive (tracker.js?hash=997515f…:640)
at Blaze.View.doRender (blaze.js?hash=f33d3df…:2090)
at blaze.js?hash=f33d3df…:1934
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3df…:3744)
at blaze.js?hash=f33d3df…:1932
at Object.Blaze._withCurrentView (blaze.js?hash=f33d3df…:2271)
at viewAutorun (blaze.js?hash=f33d3df…:1931)
at Tracker.Computation._compute (tracker.js?hash=997515f…:339)
at Tracker.Computation._recompute (tracker.js?hash=997515f…:358)
aldeed_autoform.js?hash=62240ad…:2037 Uncaught TypeError: Cannot read property 'removeEmptyStrings' of undefined
at Object.autoFormGetFormValues [as getFormValues] (aldeed_autoform.js?hash=62240ad…:2037)
at autoFormRegFormCallback (aldeed_autoform.js?hash=62240ad…:6575)
at aldeed_autoform.js?hash=62240ad…:670
at Function._.each._.forEach (underscore.js?hash=cde485f…:157)
at formPreserveConstructor.FormPreserve._retrieveRegisteredDocuments (aldeed_autoform.js?hash=62240ad…:669)
at Object.callback (aldeed_autoform.js?hash=62240ad…:628)
at pollProviders (reload.js?hash=02487cd…:180)
at Object.Reload._migrate (reload.js?hash=02487cd…:198)
at reload.js?hash=02487cd…:252
at underscore.js?hash=cde485f…:717
NOTE: Any help would be deeply appreciated and rewarded.
I'm learning Meteor by following this tutorial.
Here is my git https://github.com/nicholaschong12/meteor-slackclone
I'm getting this error:
Uncaught TypeError: Cannot read property 'channel' of undefined
Uncaught TypeError: Function.prototype.apply: Arguments list has wrong
type
Meteor.startup(function(){
Session.set('channel',this.params.channel);
});
Please help me to understand this error.
Thank You
Looking at the error:
Uncaught TypeError: Cannot read property 'channel' of undefined
We can see that it is trying to read a property 'channel' of an undefined object. This object from your code is:
this.params
Reading the iron:router docs, tells us that:
When a user goes to that url, the actual value of the parameter will be stored as a property on this.params in your route function.
However in the code snippet you provided:
Meteor.startup(function(){
Session.set('channel',this.params.channel);
});
You are trying to access this.params inside a Meteor.startup callback function, not a Router.route function. In this context this.params is undefined, as the error is telling you.
Change your startup code to match the tutorial:
Meteor.startup(function() {
Session.set('channel', 'general');
});
And in your routing code you can use values from the route like this:
Router.route('/:channel', function () {
Session.set('channel', this.params.channel);
this.render('messages');
});
In this context this.params will return an object, including the channel property defined in the routes path.