I am developing an application with Electron.js and Vue.js, I am using the Vuetify 3 components and everything was working correctly, until I tried to use v-select
on my card.
When I did, nothing else was displayed on the screen and an error appeared in the console.
Package.json:
{
"name": "ads_manager",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"@mdi/font": "5.9.55",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vuetify": "^3.0.0-beta.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"electron": "^13.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-cli-plugin-vuetify": "~2.5.8",
"webpack-plugin-vuetify": "^2.0.0-alpha.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"title": "Gerenciador de AnĂșncios"
}
App.vue:
<template>
<v-app>
<v-app-bar app color="grey-darken-4" dark>
<v-toobar-title class="px-4 text-h6">Title</v-toobar-title>
<v-btn variant="tonal" prepend-icon="mdi-account-arrow-left" class="mr-2">Login</v-btn>
<v-btn disabled variant="tonal" prepend-icon="mdi-account-arrow-right">Logout</v-btn>
<v-avatar color="grey-darken-3" class="ml-4">
<v-icon icon="mdi-account-circle"></v-icon>
</v-avatar>
</v-app-bar>
<v-main>
<v-card class="ma-5 bg-grey-darken-4 pa-5 rounded-lg"
elevation="8"
max-width="800"
rounded="lg">
<v-select
label="Select"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
variant="outlined"></v-select>
<v-btn type="buttom" variant="tonal" @click="processMidia">Ok</v-btn>
</v-card>
</v-main>
</v-app>
</template>
Error in console:
Uncaught (in promise) TypeError: globalStack.at is not a function
at eval (stack.ts?654e:55)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:173)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:182)
at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js?d2dd:1750)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:190)
at doWatch (runtime-core.esm-bundler.js?d2dd:1865)
at watchEffect (runtime-core.esm-bundler.js?d2dd:1671)
at useStack (stack.ts?654e:54)
at Object.setup [as _setup] (VOverlay.tsx?8bdc:149)
at setup (defineComponent.tsx?1991:58)
All I had to do was change my version of Node.js to one higher than 16.10.0 and update Electron to its latest version with the command: npm i electron@latest