Tag Archives: electron

[Solved] electron-builder Package mac Error: panic: runtime error: index out of range

An error is reported in the packaging mac of electron builder. The detailed error information is as follows:

goroutine 1 [running]:
github.com/develar/app-builder/pkg/icons.ConvertIcnsToPng(0xc0000ca630, 0x2d, 0x7ffd9f40874a, 0x2e, 0x2, 0x2, 0xc0000ca630, 0x2d, 0xe53320)
	/Volumes/data/Documents/app-builder/pkg/icons/icns-to-png.go:60 +0x4ab
github.com/develar/app-builder/pkg/icons.doConvertIcon(0xc00012a400, 0x5, 0x8, 0xc00025ec20, 0x2, 0x2, 0x7ffd9f4086ec, 0x3, 0x7ffd9f40874a, 0x2e, ...)
	/Volumes/data/Documents/app-builder/pkg/icons/icon-converter.go:226 +0xa0d
github.com/develar/app-builder/pkg/icons.ConvertIcon(0xc0000ad3c0, 0x97, 0x0, 0xf6400f7800000000)
	/Volumes/data/Documents/app-builder/pkg/icons/icon-converter.go:56 +0xd6
github.com/develar/app-builder/pkg/icons.ConfigureCommand.func1(0xc0002375f0, 0x40b705, 0xc2b0e0)
	/Volumes/data/Documents/app-builder/pkg/icons/icon-converter.go:33 +0x7f
github.com/alecthomas/kingpin.(*actionMixin).applyActions(0xc000124d98, 0xc0002375f0, 0x0, 0x0)
	/Volumes/data/go/pkg/mod/github.com/alecthomas/kingp[email protected]+incompatible/actions.go:28 +0x6d
github.com/alecthomas/kingpin.(*Application).applyActions(0xc0000e8780, 0xc0002375f0, 0x0, 0x0)
	/Volumes/data/go/pkg/mod/github.com/alecthomas/[email protected]+incompatible/app.go:557 +0xdc
github.com/alecthomas/kingpin.(*Application).execute(0xc0000e8780, 0xc0002375f0, 0xc00021b150, 0x1, 0x1, 0x0, 0x0, 0x0, 0x904545)
	/Volumes/data/go/pkg/mod/github.com/alecthomas/[email protected]+incompatible/app.go:390 +0x90
github.com/alecthomas/kingpin.(*Application).Parse(0xc0000e8780, 0xc0000ae010, 0xf, 0xf, 0xc0000e8780, 0xc00008a058, 0x0, 0x0)
	/Volumes/data/go/pkg/mod/github.com/alecthomas/[email protected]+incompatible/app.go:222 +0x213

Solution:
put 512×512 in the icons directory of the icon Png icon to complete packaging
for example:
dist/icons/512x512.png

[Solved] electron Use remote Error: Cannot read properties of undefined (reading ‘BrowserWindow‘)

Recently, I wrote a small demo of remote while learning electron. There is such a code:

const BrowserWindow = require("electron").remote.BrowserWindow;

An error will be reported, as shown in the following figure:

Then I went to the Internet and looked at some articles. It seems to be a problem with the version. My electron is @V16.0.4, and remote abandoned the remote module in electron12, so we need to install the remote package ourselves.

1. First install the @electron/remote package under the project root directory:

npm install @electron/remote --save

2. Initialize in the main process:

require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(mainWindow.webContents);

3. And set enableremotemodule and contextisolation in the main process webpreferences:

 webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true, // use remote module
 },

4. Set in the rendering process

const BrowserWindow = require("@electron/remote").BrowserWindow;

Well, this is my overall Code:

Main process

var electron = require("electron");
var app = electron.app; // Reference app
var BrowserWindow = electron.
var mainWindow = null; // Specify the main window to open

// When electron has finished initializing and is ready to create a browser window
// This method is called
app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true, // use remote module
    },
  });

  require("@electron/remote/main").initialize(); // initialize
  require("@electron/remote/main").enable(mainWindow.webContents);
  mainWindow.loadFile("demo2.html"); // load the index.html page
  mainWindow.openDevTools(); // open developer tools

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

Subprocess

const btn = this.document.querySelector("#btn");
const BrowserWindow = require("@electron/remote").BrowserWindow;

window.onload = () => {
  btn.onclick = () => {
    newWin = new BrowserWindow({
      width: 500,
      height: 500,
    });

    newWin.loadFile("load.html");
    newWin.on("closed", () => {
      newWin = null;
    });
  };
};

Result display

[Solved] electron project Package Error: spawn exe\dll ENOENT

Error after electron packaging: spawn exe enoent error solution.

Today, an error occurred when the project was running after packaging: spawn exe enoent error. When looking for a solution, I thought it should be that the referenced exe program was packaged into the app It is caused by the ASAR file, so the EXE file is not packaged into the app ASAR files should solve the problem.

I packed it with electron builder in Vue config.JS file, in Vue config.JS add the following code

pluginOptions: {
		electronBuilder: {
			builderOptions: {
				asar: true,
				asarUnpack: ['exeFiles'],//The folder where the referenced dll/exe files are stored
				extraFiles: {
					from: 'exeFiles',// the folder where the referenced dll/exe files are stored, my project is in the same directory as vue.config.js
					to: '. /exeFiles'//the location of the folder after packaging, I packaged this way before and after the reference relationship does not change, spawn code will not have to change
				},		
		}
	}

If you use the older version of Vue cli, it should be in package JSON, the principle is similar.

How to Solve electron import page Error

Uncaught ReferenceError: require is not defined
at index. js:1

index. Index. HTML file js

The following is index.js file

index.JS error

You need to add the following code in the created window: see the first figure for details

 webPreferences: {
    webSecurity: false, // Cancel cross-domain
    nodeIntegration: true, // v5 version requires this line
    contextIsolation: false, // v12 version needs to add this line
    enableRemoteModule:true // v10 version Turn on remote module
}

How to Solve MAC electronic installation dependent startup error

file: https://github.com/electron/electron/issues/8466

Error message:

Solution:

Switch to node_ The index file used for the electron pair in modules, then enter the terminal and execute it in the current directory with node install.js before completing the electron dependent installation

Then go to the project again and start the project

An error is reported when the electron Vue Vue component introduces the electron

Question:

Remote module of electron introduced into Vue component:

let { remote } = require("electron");

An error is reported when the electron application starts.

solve:

1. Add window before require, that is:

let { remote } = window.require("electron");

2. Add vue.config.js file in the root directory of the project, and the configuration is as follows:

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

The above two methods can be solved.

Of course, the webpreferences property of browserwindow should also be configured correctly:

webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }

Solution to electron error “cannot find module app”

Solution:

The original code looks like this:

var app = require('app');
var BrowserWindow = require('browser-window');

To be amended as follows:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

Cause of error: the version of electron used is too new, and this API has been removed in electron v1.0.0. “Cannot find module…” appears again Basically, it’s all because the module is directly introduced by require. If there are errors in the introduction of other modules, you have to check the API now. Not all of them are “const Balabala”= electron.balabala ”For example, the introduction of IPC is:

const ipc = electron.ipcMain;

Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory

1. problem description.
At present, when compressing the front-end code, there are memory leaks in the nodes, errors as follows: invalid marker – collating nearby heap limit allocation failure – JavaScript heap memory
2. The errors are as follows.

Warning: callback based version of packager() has been deprecated and will be removed from future major releases, please convert to committed version or use nodeify module.
Packager application for win32 ia32 platform, using ev4.0.5
—last few times–>
ms: Mark-sweep 1294.7 (1425.0) -> 1294.7 (1425.5) MB, 1723.7/0.0 ms (average mu = 0.094, current mu = 0.000) last resort GC requests for old space
[23328:00000202C8E3E9D0] 11281890 ms: marker scan 1295.7 (1425.5)->1294.7 (1426.5) MB, 1734.9/0.0 ms (average mu = 0.101, current mu = 0.108) assignment failure clearance may not be successful

<- JS stacktrace ->

0: ExitFrame [pc: 000003C6B7315600]
Security context: 0x01457ba9e6e1 <JSObject>
1: access [0000031C1EB050F9] [fs]js: ~ 167] [pc = 000003 c6b7319b09] (= 0 x01dd68b04d69 & lt;object mapping = 00000232 d8c16af9>, = 0 x00b368108379 & lt;path string[737]:E: \pacs-consultation-electron-meeting \ node_modules \ stompjs \ node_modules \ websocket \\ node_modules \ es5-ext \ node_modules \ es6-iterator \ node_modules \ d\ node_modules \ es5-ext \ node_modules \ es6-iterator \ node_modules \ es6-iterator \ node_modules \ es6-iterator node__……
Fatal error: Invalid marker – failed collation nearby heap limit allocation – JavaScript heap memory
1: 00007 ff67be308aa v8: Internal:GCIdleTimeHandler: GCIdleTimeHandler + 4810
2: 00007 ff67be09c46 node:MakeCallback + 4518
3: 00007 ff67be0a630 node_module_register + 2160
4: 00007 ff67c09aa4e v8: Internal:FatalProcessOutOfMemory + 846
5: 00007 ff67c09a97f v8:Internal:FatalProcessOutOfMemory + 639
6: 00007 ff67c5d8984 v8:internal:heap:MaxHeapGrowingFactor + 11476
7:00007 ff67c5cf0e7 v8::internal::ScavengeJob::operator= + 25543
8: 00007 ff67c5cd65c v8:Internal:ScavengeJob::operator= + 18748
9: 00007 ff67c5d65d7 v8:Internal:Heap:MaxHeapGrowingFactor + 2343
10: 00007 ff67c5d6656 v8:Internal:Heap:MaxHeapGrowingFactor + 2470
11: 00007 ff67c1790db v8:Internal::Factory::AllocateRawWithImmortalMap + 59
12: 00007 ff67c17ba9d v8:Internal::Factory::NewRawOneByteString + 77
13: 00007 ff67c38fbc4 v8: Internal:Heavy:SmiPrint + 372
14:00007FF67C08DF5B v8::internal::StringHasher::UpdateIndex+219
15: 00007FF67C0B44CB v8::WriteUtf8+171
16: 00007FF67BD3F1A0 std::basic_ostream<:operator< +40912
17: 00007FF67BDC9B92 uv_loop_fork+13762
18: 000003c6b7315600
npm ERR!Code ELIFECYCLE
npm ERR!er!pac – electronic [email protected] build:win32: ‘ cross-env BUILD_TARGET=win32 node .electron-vue/build. js ‘
npm made a mistake! Exit Status 134
npm ERR!
npm ERR! In pac – electronic [email protected]构建:win32脚本中失败.
npm made an error! This may not be a problem with npm. There may be additional log output above.
npm made an error! The full log of this run can be found in the following file:
npm ERR!C:\Users\boyi08\AppData\Roaming\npm-cache\_logs\ 2020 – 02 – 25 – t04_43_09_617z debug.log
3. Solutions
Programme I.
In the package. inside the json: add this sentence:–max_old_space_size = 8192 // or max_old_space_size = 4096 (it is recommended to set to 4 g to see, if not set to 8 g)
“script”: {
“dev”: “node build/dev-server.” “start”: “node build/dev-server.” node -max_old_space_size=8192 build/build”.
“build”: “node -max_old_space_size=8192 build/build. js ”
},
Programme 2.
Delete the npmrc file (not the npmrc file in the nodejs installation directory under the npm module, but the .npmrc file in C: \\user\{account}\).

Solve the problem that the tray of electron system disappears automatically

on pit

turn on electron, and found that the system tray icon would automatically disappear after a period of time. To solve this problem, I found the reason why the system tray icon would automatically disappear.

Reason

when we declare a variable in Tray, we do not declare it as a global variable, which results in it being recycled by the garbage collection mechanism during operation.

solution

declares the variable of the storage window/system tray as a global variable, that is, it is declared before app.on('ready',fuc) in main.js. In the app. On (' ready 'fuc) internal part to use
code:

//创建系统托盘图标
let iconTary = null
let path = require('path')
let {Tray} = require('electron')
//将iconTary声明为全局变量
let iconTary = null
app.on('ready',() => {

	//将iconTary赋值Tary模块
	iconTary = new Tray(path.join(__dirname,'../static/flag.png'))
	
})

problem solved.