I created a custom Quasar/Vue3 component called TemperatureOutside.vue:
<template>
<div class='text-large-1 text-weight-bold'>
{{ temperature }}°
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { setupMqtt } from './mqtt';
const temperature = ref(-100)
setupMqtt('temperature', temperature)
</script>
The function setupMqtt is defined in mqtt.ts:
import { connect } from 'mqtt'
import { Ref } from 'vue'
export const setupMqtt = (topic: string, data: Ref): void => {
const client = connect('mqtt://192.168.10.2:1884')
const topics = [`dash/${topic}`]
// removed some irrelevant setup lines
client.on('message', function (topic: string, message: Buffer) {
// key line below
data.value = JSON.parse(message.toString())
})
}
I intended to pass the data and react to its .value changes in the calling component.
The issue: everything runs smoothly when I comment out the line
setupMqtt('temperature', temperature)vue-router.mjs:35 [Vue Router warn]: uncaught error during route navigation:
warn @ vue-router.mjs:35
triggerError @ vue-router.mjs:3439
(anonymous) @ vue-router.mjs:3163
Promise.catch (async)
pushWithRedirect @ vue-router.mjs:3157
push @ vue-router.mjs:3089
install @ vue-router.mjs:3520
use @ runtime-core.esm-bundler.js:4349
start @ client-entry.js?t=1663525498443:63
Promise.then (async)
(anonymous) @ client-entry.js?t=1663525498443:82
vue-router.mjs:3441 ReferenceError: global is not defined
...
I am confused about the mentioned global variable and suspect that my attempted reference passing is failing somewhere.