javascriptvuejs3electron-buildervuetifyjs3

I can't use v-select with Vuetify 3 and Electron


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)


Solution

  • I was able to solve the problem.


    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