Error importing a user js file using electron-builder - node.js

I have an electron application with main process as follows:
const {app, BrowserWindow, Menu, dialog} = require('electron');
const path = require('path')
let logConfig = require('./js/loggConfig.js');
....
This executes perfectly when run directly from terminal.
But when I package this project using electron-builder, and install it on another machine (Windows 10), I get the following error while launching the app:
Error: Cannot find module '.js/loggConfig.js'
How do I resolve this?
Here is how my package.json looks like:
{
"name": "ABCD",
"version": "0.0.1",
"description": "...",
"author": "abcd <abcd#gmail.com>",
"homepage": "http://www.abcd.com",
"main": "main_electron.js",
"scripts": {
"postinstall": "install-app-deps",
"start": "electron .",
"dist": "build"
},
"build": {
"appId": "yourappid",
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 240,
"y": 150,
"type": "link",
"path": "/Applications"
}
]
},
"linux": {
"target": [
"AppImage",
"deb"
],
"category": "Video"
},
"win": {
"target": "NSIS",
"icon": "build/icon.ico",
"extraResources": [
]
}
},
"dependencies": {
"electron-context-menu": "^0.9.1",
"electron-log": "^2.2.13",
"fs": "0.0.1-security",
"mkdirp": "^0.5.1",
"path": "^0.12.7",
"uuid": "^3.1.0",
"xmlbuilder": "^9.0.4",
"zip-folder": "^1.0.0"
},
"devDependencies": {
"electron": "^1.7.9",
"electron-builder": "^19.49.0"
}
}

I solved the issue changing the build configuration.
Setting asar to false.
Setting asarUnpack to export all the asar content with "**/*".
"build": {
"appId": "app.node.electron",
"productName": "app electron",
"asar":false,
"asarUnpack":[
"**/*"
],
"directories": {
"output": "release"
},
"win": {
"publisherName": "app electron",
"icon": "icon.png",
"target": [
"nsis"
]
},
},

Related

TypeError: xsenv.readServices is not a function

I am trying to use #sap/xsenv library in a very basic script. I need the script to be able to look up the HANA db connection properties.
I have a simple npm project that i've created with npm init.
It has the following package.json:
{
"name": "get-notification",
"version": "1.0.0",
"description": "A script for generic DB updates ",
"private": true,
"dependencies": {
"#sap/hana-client": "^2.6.0",
"#sap/xsenv": "^1.3.0"
},
"engines": {
"node": "^10 || ^12"
},
"scripts": {
"start": "node ./script.js",
"debug": "node ./script.js"
},
"eslintConfig": {
"extends": "eslint:recommended",
"env": {
"es2020": true,
"node": true,
"jest": true,
"mocha": true
},
"globals": {
"SELECT": true,
"INSERT": true,
"UPDATE": true,
"DELETE": true,
"CREATE": true,
"DROP": true,
"CDL": true,
"CQL": true,
"CXL": true,
"cds": true
},
"rules": {
"no-console": "off",
"require-atomic-updates": "off"
}
}
}
I also have a file called default-env.json that contains the following:
{
"readme" : " info ",
"VCAP_SERVICES":
{
"user-provided": [
{
"name": "DESCRIPTIVE_NAME",
"label": "user-provided",
"tags": [],
"credentials": {
"schema": "SCHEMA_NAME",
"password": "PASSWORD",
"driver": "com.sap.db.jdbc.Driver",
"port": "PORT_NUMBER",
"host": "HOST_NAME",
"user": "USER_NAME",
"tags": "hana",
"desc": "a service"
}
}
]
}
}
Then, the following lines of code fail when i run npm start :
"use strict";
const xsenv = require('#sap/xsenv');
var services = xsenv.readServices();
At the same time another script that i have works with a CDS dependency and being initialized with cds init project-name . What is my node project missing that prevents it from using xsenv ?

How to 'sqlite3' run after build exe with electron-builder

I have build my electron app with help of https://medium.com/jspoint/packaging-and-distributing-electron-applications-using-electron-builder-311fc55178d9
it was was success (windows only). but after install published app, i am getting error as shown in screenshort
my scripts as below
package.json
"name": "aux-services",
"version": "1.0.0",
"description": "Mobile Repair Tracking System",
"main": "main.js",
"scripts": {
"start": "electron .",
"postinstall": "electron-builder install-app-deps",
"pack": "electron-builder -w"
},
"repository": {
"type": "git",
"url": "git+https://github.com/shafeequeot/Mobile-Service-Tracker.git"
},
"author": "AuxWall",
"email": "shafeequeot#gmail.com",
"url": "https://auxwall.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/shafeequeot/Mobile-Service-Tracker/issues"
},
"homepage": "https://github.com/shafeequeot/Mobile-Service-Tracker#readme",
"devDependencies": {
"electron": "^11.1.1",
"electron-builder": "^22.14.13",
"sqlite3": "^5.0.2"
},
"dependencies": {
}
}
electron-builder.json
{
"appId": "com.auxWall.service",
"productName": "Aux Services",
"copyright": "AuxWall",
"directories": {
"app": ".",
"output": "out",
"buildResources": "build-res"
},
"files": [
"package.json",
"**/*",
"node_modules"
],
"dmg": {
"background": null,
"backgroundColor": "#ffffff",
"window": {
"width": "400",
"height": "300"
},
"contents": [
{
"x": 100,
"y": 100
},
{
"x": 300,
"y": 100,
"type": "link",
"path": "/Applications"
}
]
},
"mac": {
"target": "dmg",
"category": "public.auxWall.services"
},
"win": {
"target": "nsis"
},
"linux": {
"target": "AppImage",
"category": "Utility"
}
}
can anybody help me to resolve this issue?
If sqlite3 is required during normal operation of your Electron application and not just during development then you will need to added sqlite3 as a dependency.
IE: Move "sqlite3": "^5.0.2" from "devDependencies": { ... } to "dependencies": { ... }.
package.json
{
"name": "aux-services",
"version": "1.0.0",
"description": "Mobile Repair Tracking System",
"main": "main.js",
"scripts": {
"start": "electron .",
"postinstall": "electron-builder install-app-deps",
"pack": "electron-builder -w"
},
"repository": {
"type": "git",
"url": "git+https://github.com/shafeequeot/Mobile-Service-Tracker.git"
},
"author": "AuxWall",
"email": "shafeequeot#gmail.com",
"url": "https://auxwall.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/shafeequeot/Mobile-Service-Tracker/issues"
},
"homepage": "https://github.com/shafeequeot/Mobile-Service-Tracker#readme",
"devDependencies": {
"electron": "^11.1.1",
"electron-builder": "^22.14.13"
},
"dependencies": {
"sqlite3": "^5.0.2"
}
}

ERROR: cannot use import statement outside module

Have seen posts like this before but none of the fixes have worked for me. I am trying to use the firebase emulator and having issues building firebase functions. When building and running the app all works okay, just having issues with modules in my functions.
Here is the error output I'm getting:
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (C:\Users\abiga\Desktop\communityX\functions\index.js:3:15)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
! We were unable to load your functions code. (see above)
> (node:3540) Warning: require() of ES modules is not supported.
> require() of C:\Users\abiga\Desktop\communityX\node_modules\node-fetch\src\index.js from C:\Users\abiga\Desktop\communityX\functions\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
> Instead rename C:\Users\abiga\Desktop\communityX\node_modules\node-fetch\src\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\abiga\Desktop\communityX\node_modules\node-fetch\package.json.
I have tried the 3 suggestions given (using import, removing type module, and switching to .cjs) but similar errors continue in all cases. Other devs have same code and node version (12.15.0) so not sure why only I am getting errors. Any help is much appreciated!!
Here is my package.json file for functions:
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "12"
},
"main": "index.js",
"dependencies": {
"firebase-admin": "^9.8.0",
"firebase-functions": "^3.14.1"
},
"devDependencies": {
"firebase-functions-test": "^0.2.0"
},
"private": true
}
And here is the package.json file for the module giving the issues (node-fetch).
"_from": "node-fetch#^3.0.0",
"_id": "node-fetch#3.0.0",
"_inBundle": false,
"_integrity": "sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==",
"_location": "/node-fetch",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "node-fetch#^3.0.0",
"name": "node-fetch",
"escapedName": "node-fetch",
"rawSpec": "^3.0.0",
"saveSpec": null,
"fetchSpec": "^3.0.0"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz",
"_shasum": "79da7146a520036f2c5f644e4a26095f17e411ea",
"_spec": "node-fetch#^3.0.0",
"_where": "C:\\Users\\abiga\\Desktop\\communityX",
"author": {
"name": "David Frank"
},
"bugs": {
"url": "https://github.com/node-fetch/node-fetch/issues"
},
"bundleDependencies": false,
"dependencies": {
"data-uri-to-buffer": "^3.0.1",
"fetch-blob": "^3.1.2"
},
"deprecated": false,
"description": "A light-weight module that brings Fetch API to node.js",
"devDependencies": {
"abort-controller": "^3.0.0",
"abortcontroller-polyfill": "^1.7.1",
"busboy": "^0.3.1",
"c8": "^7.7.2",
"chai": "^4.3.4",
"chai-as-promised": "^7.1.1",
"chai-iterator": "^3.0.2",
"chai-string": "^1.5.0",
"coveralls": "^3.1.0",
"delay": "^5.0.0",
"form-data": "^4.0.0",
"formdata-node": "^3.5.4",
"mocha": "^8.3.2",
"p-timeout": "^5.0.0",
"tsd": "^0.14.0",
"xo": "^0.39.1"
},
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"files": [
"src",
"#types/index.d.ts"
],
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/node-fetch"
},
"homepage": "https://github.com/node-fetch/node-fetch",
"keywords": [
"fetch",
"http",
"promise",
"request",
"curl",
"wget",
"xhr",
"whatwg"
],
"license": "MIT",
"main": "./src/index.js",
"name": "node-fetch",
"repository": {
"type": "git",
"url": "git+https://github.com/node-fetch/node-fetch.git"
},
"runkitExampleFilename": "example.js",
"scripts": {
"coverage": "c8 report --reporter=text-lcov | coveralls",
"lint": "xo",
"test": "mocha",
"test-types": "tsd"
},
"sideEffects": false,
"tsd": {
"cwd": "#types",
"compilerOptions": {
"esModuleInterop": true
}
},
"type": "module",
"types": "./#types/index.d.ts",
"version": "3.0.0",
"xo": {
"envs": [
"node",
"browser"
],
"ignores": [
"example.js"
],
"rules": {
"complexity": 0,
"import/extensions": 0,
"import/no-useless-path-segments": 0,
"import/no-anonymous-default-export": 0,
"import/no-named-as-default": 0,
"unicorn/import-index": 0,
"unicorn/no-array-reduce": 0,
"unicorn/prefer-node-protocol": 0,
"unicorn/numeric-separators-style": 0,
"unicorn/explicit-length-check": 0,
"capitalized-comments": 0,
"#typescript-eslint/member-ordering": 0
},
"overrides": [
{
"files": "test/**/*.js",
"envs": [
"node",
"mocha"
],
"rules": {
"max-nested-callbacks": 0,
"no-unused-expressions": 0,
"no-warning-comments": 0,
"new-cap": 0,
"guard-for-in": 0,
"unicorn/no-array-for-each": 0,
"unicorn/prevent-abbreviations": 0,
"promise/prefer-await-to-then": 0,
"ava/no-import-test-files": 0
}
}
]
}
}

Packaging Electron + Puppeteer to a .exe

Hi I have an Electron app that's running Puppeteer (To be specific it is puppeteer-cluster). I want to be able to package this app into a .exe that I can distribute with.
One requirement though is that I have to be able to pack it with --asar.
Here's some stuff I tried but failed:
I tried setting the executable path :
let ChromiumPath = path.join(__dirname, "..", "..", "..",".local-chromium", "win64-809590", "chrome-win","chrome.exe");
const cluster = await Cluster.launch({
puppeteer,
concurrency: Cluster.CONCURRENCY_BROWSER,
maxConcurrency: arg.length,
timeout: 340000,
puppeteerOptions: {
args: browserArgs,
headless: false,
ignoreHTTPSErrors: true,
executablePath : ChromiumPath
},
perBrowserOptions: perBrowserOptions,
});
I tried specifying the unpack directory in package.json
"config": {
"forge": {
"packagerConfig": {
"asar": {
"unpack": "**/node_modules/puppeteer/.local-chromium/**/*"
}
}.....
Here's how i package my app:
electron-packager . --asar
And if needed, here's my package.json:
{
"name": "testBrowsers",
"productName": "testBrowsers",
"version": "1.0.0",
"description": "IDk",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-packager ./ testBrowsers --platform=win32 --arch=x64 --icon=./tool.ico --out=./dist --electron-version=10.1.4 --overwrite",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
"keywords": [],
"author": "Otter",
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {
"asar": {
"unpack": "**/node_modules/puppeteer/.local-chromium/**/*"
}
},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "testBrowsers"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"proxy-chain": "^0.4.5",
"puppeteer": "^5.4.1",
"puppeteer-cluster": "^0.22.0",
"puppeteer-extra": "^3.1.15",
"puppeteer-extra-plugin-stealth": "^2.6.5",
"puppeteer-page-proxy": "^1.2.8",
"taskkill": "^3.1.0"
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.54",
"#electron-forge/maker-deb": "^6.0.0-beta.54",
"#electron-forge/maker-rpm": "^6.0.0-beta.54",
"#electron-forge/maker-squirrel": "^6.0.0-beta.54",
"#electron-forge/maker-zip": "^6.0.0-beta.54",
"electron": "10.1.4"
}
}
Thanks I really hope someone can help me out with this issue! :)
You will probably need to package chromium separately from your application. At least that's what you would do when trying to package a node application using something like pkg.
You can load chromium in puppeteer from a custom install path when launching a browser instance. So in code you will need to specify that path and make sure that your packaged app has the ability to read that path.
Your distribution file (probably an archive) will then have the chromium build that puppeteer needs separate from the actual app exe
have a look at a similar discussion here
https://github.com/vercel/pkg/issues/204

App built using electron-builder in electron-forge + webpack application shows blank screen

I wanted to use electron-builder in my electron-forge (webpack-template and React) app, because of the more packaging options
electron-forge app was created with
create electron-app test --template=webpack
This is my package.json
"name": "vocascan",
"productName": "vocascan",
"version": "1.0.0",
"description": "My Electron application description",
"main": ".webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\"",
"build": "electron-forge start && electron-builder --linux"
},
"keywords": [],
"build": {
"productName": "Vocascan",
"files": [
],
"linux": {
"target": [
"AppImage"
],
"category": "Development"
}
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.jsx",
"name": "main_window"
}
]
}
}
]
]
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.54",
"#electron-forge/maker-deb": "^6.0.0-beta.54",
"#electron-forge/maker-rpm": "^6.0.0-beta.54",
"#electron-forge/maker-squirrel": "^6.0.0-beta.54",
"#electron-forge/maker-zip": "^6.0.0-beta.54",
"#electron-forge/plugin-webpack": "6.0.0-beta.54",
"#marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
"css-loader": "^4.2.1",
"electron": "10.1.5",
"node-loader": "^1.0.1",
"style-loader": "^1.2.1",
"electron-builder": "^22.9.1"
},
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"babel-loader": "^8.1.0",
"electron-squirrel-startup": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
As you can see I added
"build": "electron-forge start && electron-builder --linux"
and
"build": {
"productName": "Vocascan",
"files": [
],
"linux": {
"target": [
"AppImage"
],
"category": "Development"
}
},
in order to make electron-builder available
the build runs just fine, but when I start the app none of my components gets shown
If someone needs the browser window code
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
and this is my folder structure
This template is NOT working with electron-builder.
Because this template was designed to work with the electron-forge make command. electron-builder can't work with it because it's using webpack dev server and not building a static build.
The template I linked is working with electron-builder because it's making a static build of react, the react components and the node modules you using and electron-builder can work with it.
I recommend this template: https://github.com/Levminer/create-electron-react-app

Resources