I can't use v-select with vuetify 3 - javascript

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)


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

Related

How to fix defineExpose method not defined in Vue3

I am trying to pass the method from child to parent. But somehow defineExpose() method is not working. Can you please guide me on what I am doing wrong?
If you need more detail then you can refer to my previous question
<script setup lang="ts">
import { useHead } from '#vueuse/head'
import { pageTitle } from '/#src/state/sidebarLayoutState'
pageTitle.value = 'Saved Topical'
useHead({
title: 'Saved Topical',
})
defineExpose({
})
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "28.0.0",
"#ckeditor/ckeditor5-vue": "2.0.1",
"#iconify/iconify": "2.0.2",
"#mapbox/mapbox-gl-geocoder": "4.7.1",
"#popperjs/core": "2.9.2",
"#vueform/multiselect": "1.5.0",
"#vueform/slider": "1.0.5",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"#vueuse/core": "5.0.3",
"#vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"#iconify/json": "1.1.358",
"#intlify/vite-plugin-vue-i18n": "2.2.1",
"#types/dragula": "3.7.0",
"#types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"#types/mapbox-gl": "^2.3.0",
"#types/markdown-it": "12.0.2",
"#types/node": "15.12.4",
"#types/nprogress": "0.2.0",
"#types/prismjs": "1.16.5",
"#types/simplebar": "5.3.3",
"#typescript-eslint/eslint-plugin": "4.27.0",
"#typescript-eslint/parser": "4.27.0",
"#vitejs/plugin-vue": "1.2.3",
"#vue/compiler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-components": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}
Any solution appreciated!

Had the same issue with Vue 3. Updating my TypeScript version from 4.5.5 to version 4.9.3 magically fixed it. Apparently older TypeScript version don't understand compiler macros like defineExpose.
And also to mute the ESLint errors, I had to prefix it (like #stefan mentioned) with:
// eslint-disable-next-line no-undef
defineExpose({ });

If you are using Veture in VS Code, disable it for your project's workspace and use Volar instead.

Update
vue version must be 3.1.3 or greater because that is when defineExpose was introduced.
https://github.com/vuejs/core/blob/main/CHANGELOG.md#313-2021-07-01
I am not sure what is wrong with your code because you are adding defineExpose.
Try this code (I changed few variables because I don't have them in my local setup):
Parent.vue
<script setup lang="ts">
import { ref } from 'vue';
import { Notyf } from 'notyf';
import Child from './Child.vue';
const addNewPaper = ref();
const notyf = new Notyf();
const successSave = () => {
addNewPaper.value.savePaper();
notyf.success('Your paper has been successfully created!');
};
</script>
<template #content>
<input type="button" #click="successSave" value="Save" />
<Child ref="addNewPaper"></Child>
</template>
Child.vue
<script setup lang="ts">
import { Notyf } from 'notyf';
import { computed, defineProps, reactive, ref } from 'vue';
const companySize = ref('');
const businessType = ref('');
const productToDemo = ref('');
const date = ref(new Date());
const initialState = reactive({
subject: '',
paper: '',
marks: '',
});
const notyf = new Notyf();
const props = defineProps({
subjects: { required: true },
});
const savePaper = () => {
notyf.success('Paper saved successfully');
};
defineExpose({
savePaper,
});
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "28.0.0",
"#ckeditor/ckeditor5-vue": "2.0.1",
"#iconify/iconify": "2.0.2",
"#mapbox/mapbox-gl-geocoder": "4.7.1",
"#popperjs/core": "2.9.2",
"#vueform/multiselect": "1.5.0",
"#vueform/slider": "1.0.5",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"#vueuse/core": "5.0.3",
"#vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"#iconify/json": "1.1.358",
"#intlify/vite-plugin-vue-i18n": "2.2.1",
"#types/dragula": "3.7.0",
"#types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"#types/mapbox-gl": "^2.3.0",
"#types/markdown-it": "12.0.2",
"#types/node": "15.12.4",
"#types/nprogress": "0.2.0",
"#types/prismjs": "1.16.5",
"#types/simplebar": "5.3.3",
"#typescript-eslint/eslint-plugin": "4.27.0",
"#typescript-eslint/parser": "4.27.0",
"#vitejs/plugin-vue": "1.2.3",
"#vue/compiler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-components": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}

Seems to be an eslint Problem. Above defineExpose you can add the comment:
// eslint-disable-next-line no-undef
defineExpose({ })
or click the quick Fix button that shows up if you hover over defineExpose.

Error when Deploying Electron app with vue cli

I followed this tutorial : https://buddy.works/tutorials/building-a-desktop-app-with-electron-and-vue-js
i install electron-builder but my exe show an empty screen ( in dev mod i see the normal page of vue-cli)
thank for your help
there is my package.json
{
"name": "electron-vue",
"version": "0.1.0",
"private": true,
"main": "main.js",
"scripts": {
"start": "vue-cli-service build && electron .",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"app:dist": "electron-builder ",
"app:dir": "electron-builder --dir"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"babel-eslint": "^10.1.0",
"electron": "^17.2.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"electron-builder": "^22.14.13"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I'm working on an electron app, using React on the front end and I'm attempting to use Jest for testing. However, when I try to run tests I get the following error:
SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (1:1):
> 1 | #import "../../fonts/fonts.css";
| ^
2 |
3 | :root {
4 | --cyborgBlue: #65c8cc;
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:147:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:142:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:198:18)
at Parser.parseDecorator (node_modules/#babel/parser/src/parser/statement.js:424:10)
at Parser.parseDecorators (node_modules/#babel/parser/src/parser/statement.js:403:30)
at Parser.parseStatement (node_modules/#babel/parser/src/parser/statement.js:228:12)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/src/parser/statement.js:966:25)
at Parser.parseBlockBody (node_modules/#babel/parser/src/parser/statement.js:942:10)
at Parser.parseProgram (node_modules/#babel/parser/src/parser/statement.js:117:10)
at Parser.parseTopLevel (node_modules/#babel/parser/src/parser/statement.js:102:25)
I realize this question has been asked many times before but the most common solution is to add "["#babel/plugin-proposal-decorators", { "legacy": true }]" to the plugins section of my .babelrc file. Unfortunately that hasn't resolved the issue.
Here's my package.json file:
"name": "cyborg_cloud_explorer",
"version": "0.2.7",
"homepage": "./",
"author": "Cyborg Inc.",
"description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
"main": "public/electron.js",
"scripts": {
"start": "electron .",
"prestart": "npm run build",
"pack": "electron-builder --dir",
"dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
"start-browser": "react-scripts start",
"eject": "react-scripts eject",
"ebuild": "npm run build && /node_modules/.bin/build",
"build": "react-scripts build",
"dist": "electron-builder",
"test": "jest __tests__/ --coverage",
"marge": "marge report.json",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"dependencies": {
"#material-ui/core": "^4.12.3",
"aws4": "^1.11.0",
"axios": "^0.21.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"base32": "0.0.6",
"convert-csv-to-json": "^1.3.1",
"convert-excel-to-json": "^1.7.0",
"dotenv": "^10.0.0",
"ffi-napi": "^3.0.1",
"franc-min": "^5.0.0",
"hyperquest": "^2.1.3",
"jssha": "^3.2.0",
"keytar": "^6.0.1",
"mammoth": "^1.4.17",
"mochawesome-report-generator": "^5.1.0",
"ndjson": "^2.0.0",
"nibbler": "^0.2.0",
"node-addon-api": "^3.1.0",
"node-html-parser": "^3.3.6",
"node-machine-id": "^1.1.12",
"node-tika": "0.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-file-icon": "^1.0.0",
"react-hotkeys-hook": "^3.4.0",
"react-scripts": "^4.0.3",
"ref-napi": "^2.1.2",
"ref-struct-napi": "^1.1.1",
"version": "^0.1.2",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"concurrently": "^6.0.2",
"dotenv": "^10.0.0",
"electron": "^9.4.3",
"electron-builder": "^22.9.1",
"electron-builder-squirrel-windows": "^22.10.4",
"electron-chromedriver": "^11.0.0",
"eslint": "^7.17.0",
"jest": "^26.6.0",
"mocha": "^8.2.1",
"mochawesome": "^6.2.1",
"node-key-sender": "^1.0.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"selenium-webdriver": "^4.0.0-beta.1",
"spectron": "^11.1.0",
"spectron-keys": "0.0.1",
"wait-on": "^5.3.0"
},
"build": {
"productName": "Cyborg Cloud Explorer",
"artifactName": "CloudExplorer",
"compression": "normal",
"forceCodeSigning": false,
"copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
"asarUnpack": [
"assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
],
"extraResources": [
"assets/vs_redist/*"
],
"files": [
"src/assets/fonts/**/*",
"src/assets/media",
"src/assets/dictionaries",
"src/assets/cyborg_cloud_engine",
"src/pages/**/*",
"src/*",
"build/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "squirrel",
"icon": "src/assets/media/cyborg.ico"
},
"linux": {
"target": "AppImage",
"icon": "./assets/media/256x256.png",
"executableName": "CloudExplorer",
"category": "Network",
"appId": "Cyborg.Cloud.Explorer"
},
"mac": {
"target": "dmg",
"icon": "./assets/media/cyborg.icns",
"appId": "com.cloud.explorer",
"category": "public.app-category.business"
},
"squirrelWindows": {
"iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
"loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And my .babelrc file:
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}```

Jest won't use the babel plugins out of the box, you need to install some additional packages.
With yarn:
yarn add --dev babel-jest babel-core regenerator-runtime
With npm:
npm install babel-jest babel-core regenerator-runtime --save-dev
Jest should then pick up the configuration from your .babelrc or babel.config.js.
Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel

I think I've found the issue. When I changed the name of my .babelrc file to babel.config.json. I didn't get that error anymore.
According to Babel's docs, .babelrc files are file-relative whereas babel.config.json files are project wide.
Here's where you can read more about it: https://babeljs.io/docs/en/config-files

Cannot use statement outside a module and Must use import to load ES Module

I'm trying to build a .exe file of my VueJS project.
For that, I want to use Electron and electron-packager.
I'm facing some issues when launching the .exe app created with the command : electron-packager . --all. The first one was:
I found on the internet that I had to add "type":"module" and "module":"es2015" in my package.json file. I added it and then I have another problem which is:
I really don't know what to do with this.
Here is my package.json file:
{
"name": "hihihihi",
"version": "0.1.0",
"type":"module",
"module":"es2015",
"description": "hihihihi",
"author": "Hihihi Hihihi <hihi.hihi#hihi.com>",
"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": "src/background.js",
"dependencies": {
"#mdi/js": "^5.9.55",
"core-js": "^3.6.5",
"nedb": "^1.8.0",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vuetify": "^2.5.2",
"vuex": "^3.6.2"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.3",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"deepmerge": "^1.5.2",
"electron": "^13.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.34.0",
"sass-loader": "^10.2.0",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

vue-cli-service serve and buid generating different styles

I'm not sure how to show it but for some reason after vue-cli-service build and vue-cli-service serve page looks different. In the case of build all is fine but in the case of serve styles are messed, but there are no errors while building and no error in the browser console. I can share the package.json if it can help and some other configuration files I have...
package.json
{
"name": "newlanding",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuelidate": "^0.7.5",
"vuetify": "^2.2.11"
},
"devDependencies": {
"#mdi/js": "^5.4.55",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
I know it's hard to find the reason without the actuall code... but maybe you have some suggestion, I do not know where else to look, as I told before no errors while building and in browser, also no errors in yarn-error.log.

Categories