This a strange one for me. I have an Electron app which works fine when I run it locally. However, when I npm run dist it to create a native version, the resulting app fails to take focus when I click on it. I click on the text field in the window and a flashing cursor shows up however, when I type keystrokes, they go to the window I was in before (e.g. Finder). This only happens in Mac (Windows works fine) when I'm using a packaged version.
Very perplexing stuff :)
My package.json looks like this (sanitised some names and URLs):
{
"name": "Myapp",
"productName": "MyApp",
"version": "0.0.44",
"description": "MyApp",
"license": "",
"repository": "",
"main": "./main.js",
"author": {
"name": "MyApp Ltd.",
"email": "c#c.com",
"url": "www.c.com"
},
"engines": {
"node": ">=4"
},
"electronVersion": "1.8.3",
"scripts": {
"test": "mocha",
"start": "electron .",
"pack": "build --dir",
"dist": "build"
},
"build": {
"appId": "MyApp",
"win": {
"target": "squirrel",
"icon": "assets/icons/Windows_Icon.ico"
},
"squirrelWindows": {
"loadingGif": "assets/img/installing.gif",
"iconUrl": "https:/fake-url.com/icon.ico",
"msi": false
},
"dmg": {
"window": {
"x": 200,
"y": 200,
"width": 537,
"height": 374
},
"icon": "assets/icons/Mac_Icon.icns",
"background": "assets/img/dmg-background.png"
},
"mac": {
"icon": "assets/icons/Mac_Icon.icns",
"extendInfo": {
"LSBackgroundOnly": 1
}
}
},
"dependencies": {
"azure-event-hubs": "0.0.4",
"babel-polyfill": "^6.20.0",
"bootstrap": "^3.3.7",
"chokidar": "^1.6.1",
"download": "^5.0.2",
"electron-debug": "^0.3.0",
"electron-is-dev": "^0.3.0",
"electron-json-storage": "^3.0.4",
"electron-log": "^2.2.6",
"electron-positioner": "^3.0.0",
"electron-squirrel-startup": "^1.0.0",
"follow-redirects": "^1.2.3",
"glob": "^7.1.1",
"howler": "^2.0.3",
"jquery": "^3.2.1",
"nan": "^2.1.0",
"nconf": "^0.7.2",
"node-schedule": "^1.2.5",
"opener": "^1.4.3",
"pusher-js": "^4.1.0",
"sqlite3": "^3.1.8",
"unirest": "^0.5.1"
},
"devDependencies": {
"chai": "^4.0.2",
"chai-as-promised": "^6.0.0",
"electron": "^1.8.3",
"electron-builder": "^20.8.0",
"electron-builder-squirrel-windows": "^20.9.0",
"electron-installer-dmg": "^0.2.1",
"electron-packager": "^5.1.1",
"mocha": "^3.2.0",
"spectron": "^3.0.0",
"xo": "^0.10.0"
},
"xo": {
"esnext": true,
"envs": [
"node",
"browser"
]
}
}
The LSBackgroundOnly option in Mac apparently has this effect because it designates the app a background app and presumably no events are delivered to it. Once I set it to false, the issue was resolved.
Related
Actually I can build to use electron --trace-warnings -r #babel/register . and with #babel
electron-builder --windows nsis:ia32 command is success as a result
but i execute that, it occur error.
A JavaScript eror occured in the main process
C:\dev\electron\SomeDirectoryPath123123\index.js:1
import {app, BrowserWindow} from "electron";
^^^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFuntion (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1039:15)
...etc...
please help me..
.babelrc
{
"presets": ["#babel/preset-env"]
}
package.json
{
"name": "test app",
"version": "1.0.0",
"description": "helpp me",
"main": "index.js",
"scripts": {
"manual-run": "electron --trace-warnings -r #babel/register .",
"build-package": "electron-builder --windows nsis:ia32"
},
"author": "nother",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.18.5",
"#babel/node": "^7.18.5",
"#babel/preset-env": "^7.18.2",
"#babel/register": "^7.17.7",
"electron": "^19.0.4",
"electron-builder": "^23.0.3"
},
"dependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.18.5",
"#babel/node": "^7.18.5",
"#babel/preset-env": "^7.18.2",
"#babel/register": "^7.17.7",
"elasticsearch": "^16.7.3",
"express": "^4.18.1",
"mongodb": "^4.7.0",
"node-fetch": "^2.6.7",
"sqlite3": "^5.0.8"
},
"build": {
"appId": "test-electron-app",
"productName": "hello!",
"buildDependenciesFromSource": false,
"asar": true,
"files": [
"dist/**/*",
"package.json",
"index.js"
],
"win": {
"target": "nsis"
},
"nsis": {
"oneClick": false
},
"directories": {
"buildResources": "./build/",
"output": "./distout/"
}
}
}
It works in 64 bits but with 32 bits is the problem, the application starts and shows a blank tab, when I press click and move, the content appears and I can drag the content, but the tab is still blank
this is my package.
{
"name": "iher-lega",
"version": "1.0.0",
"description": "its app for win7 32bits",
"main": "src/index.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder"
},
"keywords": [],
"author": "Erick ",
"license": "ISC",
"dependencies": {
"#popperjs/core": "^2.4.0",
"bootstrap": "^4.4.1",
"custom-electron-titlebar": "^3.2.2-hotfix62",
"electron-reload": "^1.5.0",
"filesaver": "0.0.13",
"html-pdf": "^2.2.0",
"jquery": "^3.5.1",
"jszip": "^3.4.0",
"promise-mysql": "^4.1.3",
"tableexport": "^5.2.0"
},
"devDependencies": {
"electron": "^8.3.1"
},
"build": {
"appId": "com.erick.schoolS",
"win": {
"target": [
{
"target": "msi",
"arch": [
"ia32"
]
}
],
"icon": "src/logo.ico"
}
}
}
I have installed the template from Electron-vue and I'm experiencing an issue with specific websites. These websites work on Chrome and Edge, yet, fail to completely load in webview.
The following example is the whole setup of the view. The console of this show that Local Storage, Session Storage and IndexedDB only have an entry for the website faselhd but have no data inside. The Cookies has an entry for the website with this type of data fcuid
<webview id="webview_custom" :src="https://www.faselhd.co/" style="height: 100%"></webview>
As far as I understand, there is an issue saving the session of the website and it's working correctly on the normal browsers but cannot save the session in the webview.
I have tried using this policy in my index.ejs, but had no luck.
<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval'">
Expected: The website loads and shows the content.
Currently: The website keeps refreshing because the session cannot be saved.
package.json
{
"name": "my-app",
"version": "1.0.0",
"author": "author",
"description": "description",
"license": null,
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"productName": "app-electron",
"appId": "com.username.app_electron",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"axios": "^0.18.0",
"electron-context-menu": "^0.16.0",
"vue": "^2.5.16",
"vue-electron": "^1.0.6",
"vue-router": "^3.0.1",
"vue-tabs-chrome": "^0.5.1",
"vuetify": "^2.2.17",
"vuetify-loader": "^1.4.3",
"vuex": "^3.0.1",
"vuex-electron": "^1.0.0"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"cfonts": "^2.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"deepmerge": "^4.2.2",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"fibers": "^4.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.4.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.9.2",
"sass": "^1.26.3",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
You're using the default template electron-vue which it uses a very old Electron 2.0.1 and that is Chrome 61, Node 8.9.3, V8 6.1.534.41 which is quite outdated to properly support Local Storage and Session Storage. You need to update Electron to a newer version.
To your existing project
Update electron to 8.1.x by running yarn add electron (this will update electron to latest 8.1.1)
Open .electron-vue/webpack.renderer.config.js and at line 115 change HtmlWebpackPlugin configuration object to this:
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),
Open src/main/index.js and update/add BrowserWindow webPreferences options like this:
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
// Add these webPreferences options
webPreferences: {
nodeIntegration: true,
webviewTag: true
}
})
Add a webview to your renderer. I had to set <webview src="..."> insted of binding <webview :src="..."> like this:
<template>
<div id="app">
<!-- <router-view></router-view> -->
<webview id="webview_custom" src="https://www.faselhd.co/" style="height: 100%"></webview>
</div>
</template>
<script>
export default {
name: 'vue-electron-webview2'
}
</script>
<style>
/* CSS */
html, body, #app { height: 100% }
</style>
Now run the app using yarn dev and you'll be able to see the the web page properly.
I keep getting this error:
error in ./node_modules/keytar/build/Release/keytar.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./node_modules/keytar/lib/keytar.js 1:13-52
# ./src/background.js
# multi ./src/background.js
I have background.js set as the main electron file in package.json because I'm using vue/vuetify with it which uses a main.js file as well.
{
"name": "project",
"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", // <------------------ see right here
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.4.3",
"jwt-decode": "^2.2.0",
"keytar": "^5.0.0",
"request": "^2.88.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"electron": "^7.1.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-loader": "^0.6.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-electron-builder": "^1.4.3",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Searching, it seems this happens when keytar is used in a renderer process. But background.js isn't a renderer process. Or am I missing something? I am completely new to electron.
I needed to mark keytar as external (as mentioned at https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#native-modules)
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
// List native deps here if they don't work
externals: ['keytar']
}
}
}
Once I did that it worked properly.
Run appropriate loader (source).
yarn add node-loader -D
// vue.config.js
configureWebpack: {
devtool: 'source-map',
module: {
rules: [
{ test: /\.node$/, loader: 'node-loader' }
]
}
}
I am building my first electron app, but I cant package it.
When I am testing using npm start everything works but when I tried to package it and when it done, I run it, but I am getting something like this ENOENT: no such file or directory, lstat.
I have some source like this.
fs.copy(path.resolve('src/app/resource/'), dir + '/resource/', e => {
if (e) {
reject(e);
return;
}
resolve(true);
});
That will copy files to the specified directory and it seem this is the cause of the error.
Edit:
I enable the devtools and create installer for windows, but just got this.
It seems my files is not included on the build.
this is my package.json
{
"name": "exporter",
"productName": "Exporter",
"version": "0.0.1",
"description": "",
"license": "MIT",
"repository": "",
"author": {
"name": "",
"email": "",
"url": "none"
},
"scripts": {
"start": "electron .",
"build": "electron-packager . --out=/mnt/Busy\\ Drive/dist/exporter --asar --overwrite --all",
"pack": "build --dir",
"dist": "build -wl"
},
"dependencies": {
"bootstrap": "^4.0.0-beta",
"config": "^1.28.1",
"electron-debug": "^1.0.0",
"fs-extra": "^4.0.2",
"is-electron-renderer": "^2.0.1",
"jquery": "^3.2.1",
"mysql": "^2.15.0",
"popper.js": "^1.13.0",
"winston": "^2.4.0"
},
"devDependencies": {
"devtron": "^1.1.0",
"electron": "^1.8.1",
"electron-builder": "^19.47.1",
"electron-builder-squirrel-windows": "^19.47.0",
"electron-packager": "^8.0.0",
"eslint": "^4.11.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1"
},
"build": {
"appId": "no-id",
"linux": {
"target": [
"dir"
]
},
"win": {
"target": "nsis"
}
}
}
I already tried different packager but still without success.
Is there wrong on my package.json?
The culprit is using the path.resolve, you should usepath.join(__dirname, 'your/path/here'), so it can access the asar file.