I have a firestore binding in my vuex store, on which one frontend element depends. Here is some example code:
Vue Template:
<v-list-item
v-if="dependantGetter"
#click="doSomething()">
<v-list-item-title>Do something</v-list-item-title>
</v-list-item>
Vue Script:
computed: {
...mapGetters(["dependantGetter"]),
}
Vuex Store:
const state = {
settings : [],
}
const getters = {
dependantGetter: ({ settings }) => {
let check = settings.filter(setting => setting.id === 'idName')
return check[0].startSync
}
}
But the problem I have is, that the browser throws multiple errors until the binding becomes true or false:
[Vue warn]: Error in render: "TypeError: Cannot read property 'startSync' of undefined"
TypeError: Cannot read property 'startSync' of undefined
[Vue warn]: Error in render: "TypeError: Cannot read property 'startSync' of undefined"
TypeError: Cannot read property 'startSync' of undefined
[Vue warn]: Error in render: "TypeError: Cannot read property 'startSync' of undefined"
TypeError: Cannot read property 'startSync' of undefined
My solution so far is to return the getter like this from inside vuex, but this really doesn't look right to me
return check[0] == undefined ? false : check[0].startSync
Or is this the right way to return things, when working with firebase and vuexfire?
Related
I just install vue-session plugin to my project(vue 3 with Vite), with the setup like below:
import { createApp } from 'vue'
import App from './App.vue'
import VueSession from 'vue-session' <---
import router from './router.js' //
createApp(App).use(router).use(VueSession).mount('#app')
But when I tried to reload the page, it shows:
Uncaught TypeError: Cannot set properties of undefined (setting '$session')
at Object.VueSession.install (index.js:13:19)
at Object.use (runtime-core.esm-bundler.js:3808:28)
at main.js?t=1648710456054:7:28
The other plugin also show same error:
Uncaught TypeError: Cannot set properties of undefined (setting '$cookies')
at Object.install (vue-cookies.js:22:21)
at Object.use (runtime-core.esm-bundler.js:3808:28)
at main.js?t=1648712611253:7:28
Source:
vue-session
Vue.prototype.$session = { <--this line
flash: {
parent: function(){
return Vue.prototype.$session;
},
get: function(key){
....
vue-cookies
var VueCookies = {
// install of Vue
install: function (Vue) {
Vue.prototype.$cookies = this;
Vue.$cookies = this;
},
Can somebody help a JS newbie?
It s a Vue2 plugin. It wont works with Vue3.
Hello All I'm new to react native and started with wallpaper app. I'm using react-native-wallpaper-manager to built an App and
I'm getting following error:
index.js:9 Uncaught TypeError: Cannot read property 'setWallpaper' of undefined
index.js
var NativeModules = require('react-native');
var Image = require('react-native');
module.exports = {
setWallpaper: (source,callback = (res)=>{
console.log(res);
}) =>{
NativeModules.WallPaperManager.setWallpaper(Image.resolveAssetSource(source),callback);
}
} ;
App.js
WallPaperManager.setWallpaper({uri: 'img_link', screen: 'both/home/lockscreen'}, (res)=> console.log(res));
Please help me to resolve this error.
I'm had the same issue.
I have tried these libraries as well , all gettings the same error
https://www.npmjs.com/package/react-native-manage-wallpaper
https://www.npmjs.com/package/react-native-wallpaper-enhanced
Try this one instead
https://www.npmjs.com/package/react-native-manage-wallpaper/v/1.1.2
I'm using Vue.js, TypeScript, and the aws-iot-device-sdk package and like to subscribe to a IoT topic. This is how I create a new client:
import AwsIot from 'aws-iot-device-sdk';
import { config } from 'aws-sdk';
client = new AwsIot.device({
region: 'foo',
host: 'foo',
clientId: 'foo',
protocol: 'wss',
accessKeyId: config.credentials.accessKeyId,
secretKey: config.credentials.secretAccessKey,
sessionToken: config.credentials.sessionToken
});
One seconds later I get this console error:
Uncaught TypeError: Cannot read property 'read' of undefined
at nReadingNextTick (_stream_readable.js)
Uncaught TypeError: Cannot read property 'length' of undefined
at onwriteDrain (_stream_writable.js)
at afterWrite (_stream_writable.js)
Uncaught TypeError: Cannot read property 'length' of undefined
at onwriteDrain (_stream_writable.js)
at afterWrite (_stream_writable.js)
Uncaught TypeError: Cannot read property '_readableState' of undefined
at emitReadable_ (_stream_readable.js)
Uncaught TypeError: Cannot read property 'reading' of undefined
at maybeReadMore_ (_stream_readable.js)
node-libs-browser's implementation of process.nextTick does not accept callback arguments. Just override it inside your main.ts!
process.nextTick = function(callback) {
const args = [...arguments];
args.shift();
setTimeout(() => callback.apply(null, args));
}
UPDATE:
It's fixed in v2.2.1: Commit
I must implement the library Vue-Snotify to show notifications in a Vue.js project.
Notice: I have no pre-experience with Vue.js! I just got this task and it needs to be done.
I have played around with the project and tried different approaches, which got me to understand Vue.js a bit better but after trying so much, I'm left with no idea how to fix this :(
home.js
import Snotify from 'vue-snotify'
Vue.use(Snotify)
var vmHome = new Vue({
...
components: {
myFancyComponent,
...
}
})
myFancyComponent.vue
<template>
<div>
<button type="button" #click="showNotif">Show</button>
<vue-snotify></vue-snotify>
</div>
</template>
<script>
module.exports = {
name: "my-fancy-component",
methods: {
showNotif: function() {
console.log(this.$snotify.success('Example body content'))
}
},
...
}
</script>
I can trigger the notification method and it even returns me a valid object - no errors! But no trace of a notification.
SnotifyToast {id: 338737384058, title: null, body: "Example body content", config: {…}, eventEmitter: Vue$3, …}
Though I noticed an error in the console on the page's first load:
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'emitter' of undefined"
found in
---> <VueSnotify>
<MyFancyComponent>
<Root>
TypeError: Cannot read property 'emitter' of undefined
at VueComponent.created
I wonder why the VueSnotify tag wraps the MyFancyComponent and not the other way around?
It seems that you got the methods data type wrong, it needs to be an object and not array.
module.exports = {
name: "my-fancy-component",
//---------v--- This part
methods: {
showNotif: function() {
console.log(this.$snotify.success('Example body content'))
}
},
...
}
I was performing development using ipfs - api, I encountered the following error, add of image file to ipfs node does not work well.
Looking at the details of the error, it seems that protocol is treated as undefined among if (protocol.indexOf ('https') === 0) { in request.js.
This is the error description
Uncaught (in promise) TypeError: Cannot read property 'indexOf' of undefined
at webpackJsonp../node_modules/ipfs-api/src/utils/request.js.module.exports (request.js:7)
at requestAPI (send-request.js:165)
at send (send-request.js:196)
at send-files-stream.js:99
at Function.promisify (add.js:41)
at index.js:32
at Object.add (add.js:60)
at VueComponent._callee$ (HaikuCompose.vue?0664:118)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:296)
This is the code I wrote
import IPFS from "ipfs-api"
const ipfsConf = { host: process.env.IPFSHOST, port: process.env.IPFSPORT, protocol: process.env.IPFSPROTCOL }
const ipfs = new IPFS(ipfsConf)
export default {
name: 'ipfstest',
data() {
return {
file:null,
buffer:null,
ipfsHash:null,
}
},
methods: {
async addipfs() {
await ipfs.add(this.buffer, (err, ipfsHash) => {
console.log(err,ipfsHash);
this.ipfsHash = ipfsHash[0].hash;
})
},
From the module sources, indexOf on line 7 of the request.js file is used on the variable storing the protocol, which is undefined in your case.
And from your code, I think I can safely assume that your environment variable process.env.IPFSPROTCOL is undefined.
TL:DR : I think you wanted to write IPFSPROTOCOL instead of IPFSPROTCOL