Idea terminal cannot open Electron.exe by command(npm run electron:serve) - vuejs2

I use command in idea terminal
e.g.npm run electron:serve
My code environment:
Mac M1/macos Ventura13.0.1
node#14.21.2
npm#6.14.17
electron#12.2.3
The command stopped after Vue project compiled successful.
like this:
I try to run command rm -rf node_modules package-lock.json&&npm install
but cannot fix the situation.
Colleague's code environment:
win10
node#16.17.1
npm#8.19.2
electron#9.4.4
The normal situation in my colleague's computer:
This is my package.json
{
"name": "RetinaCare",
"version": "2.3.11",
"publishDate": "2022-03-07",
"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"
},
"main": "background.js",
"dependencies": {
"axios": "^0.21.1",
"chokidar": "^3.4.2",
"core-js": "^3.6.5",
"el-table-infinite-scroll": "^1.0.10",
"electron-builder": "^23.6.0",
"electron-updater": "^4.3.9",
"element-ui": "^2.13.2",
"html2canvas": "^1.0.0-rc.7",
"iconv-lite": "^0.6.3",
"js-md5": "^0.7.3",
"jspdf-html2canvas": "^1.4.9",
"print-js": "^1.2.0",
"qiao-is-online": "0.0.6",
"vue": "^2.6.11",
"vue-html-to-paper": "^1.3.1",
"vue-image-zoomer": "1.0.4",
"vue-print-nb": "^1.5.0",
"vue-qr": "^2.4.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"electron": "^12.2.3",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
This is my vue.config.js
module.exports = {
pages: {
index: 'src/main.js',
login: 'src/login/main.js'
},
chainWebpack: config => {
config.resolve.symlinks(true)
},
devServer: {
hot: true,
hotOnly: true,
watchContentBase: false
},
configureWebpack: {
target: 'electron-renderer',
externals: ['fsevents']
},
pluginOptions: {
electronBuilder: {
extraResources: {
from: './public/dll',
to: './dll'
},
builderOptions: {
asar: false,
mac: {
target: {
target: 'default',
arch: [
'x64',
'arm64'
]
}
},
win: {
requestedExecutionLevel: 'requireAdministrator',
icon: './public/ljj_256.ico',
artifactName: '${productName}-Setup-${version}.${ext}',
target: [
{
target: 'nsis',
arch: [
'ia32'
]
}
]
},
productName: 'testProject',
nsis: {
include: './public/nsis/installer.nsh',
perMachine: false,
runAfterFinish: true,
oneClick: false,
allowElevation: true,
allowToChangeInstallationDirectory: true,
installerIcon: './public/ljj_256.ico',
uninstallerIcon: './public/ljj_256.ico',
installerHeaderIcon: './public/ljj_256.ico',
createDesktopShortcut: true,
createStartMenuShortcut: true,
shortcutName: 'electronProject',
deleteAppDataOnUninstall: true
},
publish: [
{
provider: 'generic',
url: 'https://www.electronProject_test.com/client'
}
]
}
}
}
}
This is project catalogue:
Because mac m1's framework is arm64,i changed electron version from ^9.2.0 to ^12.2.3, added electron-builder ^23.6.0 to package.json.
By the way i started sample project of vue-electron successful on the Mac.The question is so strange😭

The issue was resolved by delete yarn.lock in project. Beacuse of yarn.lock in my project, so vue-cli will look for yarn runtime environment in server. But i have not install yarn runtime environment on server. The code stop at hasProjectYarn(api.getCwd()). If you dont need yarn, Meanwhile yarn.lock file in your project ,you should delete the file!

Related

[Vue2 + module federation]: Error in dependencies "TypeError: Cannot read properties of undefined (reading 'warn')"

I'm trying to create a MicroFrontend in Vue2 using module federation, like Pinia provides a singleton behaviour about stores that could be awesome for use in module federation, the problem is when I inject this an error is prompt ( I make previous test in a unique application and that works )
That is the error:
And the piece of code relative is:
My configuration is the next:
Child1: Who exposed it's components contains this vue.config.js
const { defineConfig } = require('#vue/cli-service')
const {ModuleFederationPlugin} = require("webpack").container;
const deps = require("./package.json");
module.exports = defineConfig({
transpileDependencies: true,
publicPath: 'auto',
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'child1',
filename: 'remoteEntry.js',
exposes: {
'./ResultsPage': './src/pages/ResultsPage',
'./Test1Page' : './src/pages/Test1Page',
'./Test2Page' : './src/pages/Test2Page',
'./appStore' : './src/store/appStore.js'
},
shared: require("./package.json").dependencies,
}),
],
}
})
And the package.json:
{
"name": "child2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/composition-api": "^1.7.0",
"core-js": "^3.8.3",
"pinia": "^2.0.17",
"vue": "^2.6.14",
"vue-router": "^4.1.5"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.8",
"#vue/cli-plugin-eslint": "~5.0.8",
"#vue/cli-plugin-router": "~5.0.8",
"#vue/cli-plugin-unit-mocha": "~5.0.8",
"#vue/cli-service": "~5.0.8",
"#vue/test-utils": "^1.1.3",
"chai": "^4.2.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-pinia": "~0.1.4",
"vue-template-compiler": "^2.6.14"
}
}
Parent: This is how works vue.config.js
const { defineConfig } = require("#vue/cli-service");
const { ModuleFederationPlugin } = require("webpack").container;
const ExternalTemplateRemotesPlugin = require("external-remotes-plugin");
const deps = require("./package.json");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: "microfrontends-library",
remotes: {
child1: "child1#http://localhost:3013/remoteEntry.js",
//child2: "child2#http://localhost:3014/remoteEntry.js",
},
shared: require('./package.json').dependencies,
})
],
},
});
And its package.json
{
"name": "parent",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/composition-api": "^1.7.0",
"core-js": "^3.8.3",
"pinia": "^2.0.17",
"vue": "^2.6.14",
"vue-router": "^4.1.5"
},
"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-plugin-router": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.1.3",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-pinia": "~0.1.4",
"vue-template-compiler": "^2.6.14"
}
}
In resume: I don't have a HTTP server because I'm making a build of the child and them using a HTTP server for support ( In the future I would like to add CDN to this children's )
All help would be accepted, really I'm in a stuck solution, so any movement to a solution would be great
// vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
}
I find this solution in answer
Works for me

vue3-electron production build facing webpackJsonp not defined problem

I'm trying to build an electron app from a vue-cli3 project. The vue project itself works fine both in development and production. Everything works as well if I run a dev mode with npm run electron:serve. But the built electron app would give a Uncaught TypeError: Cannot read property 'webpackJsonp' of undefined in each packed js file.
vue.config.js:
module.exports = {
configureWebpack: config => {
const tsLoader = config.module.rules.find((loader) => loader.test === /\.ts$/);
const tsLoaderIndex = config.module.rules.indexOf(tsLoader);
const webWorkerLoader = {
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
filename: 'WorkerName.[hash].js',
inline: 'fallback',
}
}
]
}
config.module.rules = [...config.module.rules.slice(0, tsLoaderIndex-1), webWorkerLoader, ...config.module.rules.slice(tsLoaderIndex-1)]
// console.log(config.module.rules);
if (process.env.NODE_ENV === 'production') {
config.mode = 'production'
// pack dependencies separately
let optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
},
parallel: false,
chainWebpack: config => {
config.output.globalObject('this')
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'font-size-base': '18px'
},
javascriptEnabled: true
}
}
}
},
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}
package.json:
{
"name": "testApp",
"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": {
"#ant-design/icons-vue": "^6.0.1",
"#kyvg/vue3-notification": "^2.3.4",
"ant-design-vue": "^2.2.8",
"bioseq": "^0.1.5",
"core-js": "^3.6.5",
"echarts": "^5.3.3",
"idb-keyval": "^5.1.3",
"jszip": "^3.7.1",
"lodash": "^4.17.21",
"pako": "^1.0.11",
"pdfmake": "^0.2.5",
"vue": "^3.2.4",
"vue3-infinite-scroll-good": "^1.0.2",
"xlsx": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"#types/electron-devtools-installer": "^2.2.0",
"#types/node": "^16.0.0",
"#types/pako": "^1.0.2",
"#types/pdfmake": "^0.2.1",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.1.4",
"#vue/eslint-config-typescript": "^7.0.0",
"electron": "^13.6.9",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"less": "^4.1.2",
"less-loader": "^7.3.0",
"style-resources-loader": "^1.4.1",
"typescript": "~4.1.5",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-cli-plugin-style-resources-loader": "~0.1.5",
"worker-loader": "^3.0.8"
}
}
There are some instructions that it may be caused by something wrong with the webpack configuration. But I can only find examples in vue-cli2 webpack.prod.conf.js. How do we modify that in vue-cli3?
Find the clue at https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1706
There was a mistype 'this' in one of my vue templates causing the error. Removing that fixed the problem.

Getting a "TypeError: Invalid PostCSS Plugin found at: plugins[0]" whenever I try to build my css file using postcss and tailwind

Alright so my project used to work fine but ever since I updated to the latest version of tailwindcss and postcss, its giving me the above error.
Error TypeError: Invalid PostCSS Plugin found at: plugins[0]
My package.json file:
{
"name": "aniko",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"css": "postcss src/assets/css/tailwind.css -o src/assets/css/styles.css",
"start": "node server.js"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/line-clamp": "^0.2.1",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#vue/cli": "^4.5.13",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dotenv": "^9.0.0",
"epic-spinners": "^1.1.0",
"express": "^4.17.1",
"mal-scraper": "^2.7.1",
"moment": "^2.29.1",
"node-fetch": "^2.6.0",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"vue": "^2.6.11",
"vue-progressbar": "^0.7.5",
"vue-toasted": "^1.1.28"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"tailwindcss": "^3.1.6",
"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"
]
}
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
My postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
I have tried reinstalling everything and even switching back to the previous version but the error still persists.
How can I solve this?

Vue + Eslint: lintOnSave=false not working, browser-overlay still interrupts development

I updated my packages and now I get the browser-overlay on linting errors during development.
I had this problem with a Vue 2 setup some time ago, and now the same happens with Vue 3.
I would like to keep the warning/errors in the console, but the overlay disrupts my development, does anyone have an idea on how to solve this?
package.json
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "env-cmd -f ../.env vue-cli-service serve --port 4022",
"build": "env-cmd -f ../.env vue-cli-service build",
"build-action": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#apollo/client": "^3.1.3",
"#vue/cli": "^4.5.4",
"core-js": "^3.6.5",
"env-cmd": "^10.1.0",
"graphql": "^15.3.0",
"graphql-tag": "^2.11.0",
"lodash": "^4.17.20",
"register-service-worker": "^1.7.1",
"vue": "^3.0.0-rc.9",
"vue-i18n": "^9.0.0-alpha.15",
"vue-router": "^4.0.0-beta.7",
"vuex": "^4.0.0-beta.4"
},
"devDependencies": {
"#types/lodash": "^4.14.160",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "^4.5.4",
"#vue/cli-plugin-eslint": "^4.5.4",
"#vue/cli-plugin-pwa": "^4.5.4",
"#vue/cli-plugin-router": "^4.5.4",
"#vue/cli-plugin-typescript": "^4.5.4",
"#vue/cli-plugin-vuex": "^4.5.4",
"#vue/cli-service": "^4.5.4",
"#vue/compiler-sfc": "^3.0.0-rc.9",
"#vue/eslint-config-airbnb": "^5.1.0",
"#vue/eslint-config-typescript": "^5.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-vue": "^7.0.0-beta.2",
"sass": "^1.26.10",
"sass-loader": "^8.0.2",
"typescript": "^3.9.7",
"vue-cli-plugin-vue-next": "~0.1.3"
}
}
vue.config.js
module.exports = {
lintOnSave: false,
// lintOnSave: process.env.NODE_ENV !== 'production',
pwa: {
workboxOptions: {
skipWaiting: true,
},
},
};
eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-recommended', '#vue/airbnb', '#vue/typescript/recommended'],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'import/extensions': [
'error',
'always',
{
ts: 'never',
vue: 'never',
},
],
},
};
I found this: https://stackoverflow.com/a/41211721/4071305.
I added an empty typescript file and edited the include and exclude partsof my tsconfig.json like this:
"include": [
"empty.ts",
],
"exclude": [
"node_modules",
"src/**/*.ts",
"src/**/*.vue",
"tests/**/*.ts"
]
This hotfix works, but I hope the lintOnSave flag is gonna work when Vue 3 is officially released.

How to add UglifyJS to a VueJS project

I need to add UglifyJS to a VueJS CLI 3 project.
My vue.config.js:
var webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [new UglifyJsPlugin()],
},
publicPath: "./",
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
This is the error message I get after trying to run npm run build.
Invalid options in vue.config.js: "optimization" is not allowed.
"plugins" is not allowed
I tried updating all packages and install the webpack UglifyJS plugin.
package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"firebase": "^6.3.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.1.2",
"vue-router": "^3.0.3",
"vuetify": "^1.5.5",
"vuex": "^3.0.1"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-plugin-pwa": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"material-design-icons-iconfont": "^5.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5",
"webpack": "^4.40.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {"no-console": "off"},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
How to add UglifyJS to the VueJS project?