app threw an error during load after installing sqlite3 (electronjs) - node.js

after installing sqlite3 in electron app and writing code to create database, app returns error and doesn't start
error returned:
Error: Cannot find module 'C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\sqlite3\lib\binding\napi-v3-win32-unknown-x64\node_sqlite3.node'
at Module._resolveFilename (internal/modules/cjs/loader.js:584:15)
at Function.Module._resolveFilename (C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:43:12)
at Function.Module._load (internal/modules/cjs/loader.js:510:25)
at Module.require (internal/modules/cjs/loader.js:640:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\sqlite3\lib\sqlite3-binding.js:4:17)
at Object.<anonymous> (C:\Users\web_walkerX\Documents\Techdroid\Desktop\cranesoft-desktop - Copy\node_modules\sqlite3\lib\sqlite3-binding.js:7:3)
at Module._compile (internal/modules/cjs/loader.js:693:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
at Module.load (internal/modules/cjs/loader.js:602:32)
see image below
code to create local DB
const createLocalDB = () => {
let db = new sqlite3.Database("../../data/cranesoft.sqlite3", (err) => {
if (err) {
console.log('Error when creating the database', err)
} else {
console.log('Database created!')
/* Put code to create table(s) here */
// createTable()
}
})
}
createLocalDB()
module.exports = createLocalDB
I have sqlite installed locally and it works without problem, all commands work as expected. I can create dbs from the shell and the rest
Below is an image of sqlite working from the shell
Several SO answers say to run "rebuild": "electron-rebuild -f -w sqlite3" after sqlite3 installation, doing this returns the following error
I have also tried "postinstall": "electron-builder install-app-deps" which didn't work
I have also tried the intructions on https://github.com/nodejs/node-gyp to build node-gyp,
I installed visual studio 2022 (desktop development with c++ selected), all relevant development SDKs and libraries were installed yet sqlite error persists
this is my package.json
"name": "appname",
"version": "1.0.0",
"description": "play",
"main": "main.js",
"scripts": {
"start": "electron .",
"postinstall": "electron-builder install-app-deps",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"repository": "",
"keywords": [
"palymaker"
],
"author": "Playmaker Systems",
"license": "CC0-1.0",
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^3.3.5",
"ejs": "^3.0.1",
"ejs-electron": "^2.1.1",
"electron-print-dialog": "0.1.0-alpha.1",
"electron-router": "^0.5.1",
"electron-squirrel-startup": "^1.0.0",
"express": "^4.17.1",
"jquery": "^3.3.1",
"mysql2": "^2.3.3",
"nodemon": "^2.0.2",
"sequelize": "^6.9.0",
"twbs-pagination": "^1.4.2"
},
"devDependencies": {
"browser-sync": "2.26.3",
"electron": "^4.2.12",
"electron-builder": "^22.14.13",
"electron-rebuild": "^3.2.7",
"gulp": "4.0.0",
"sqlite3": "^5.0.8"
},
"build": {
"appId": "com.palymaker.appname",
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 240,
"y": 150,
"type": "link",
"path": "/Applications"
}
]
},
"linux": {
"target": [
"AppImage",
"deb"
]
},
"win": {
"target": [
"nsis",
"msi"
],
"icon": "build/appname-icon.ico"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"installerIcon": "build/appname-icon.ico",
"uninstallerIcon": "build/appname-icon.ico",
"deleteAppDataOnUninstall": true,
"runAfterFinish": true,
"createDesktopShortcut": "always",
"createStartMenuShortcut": true,
"shortcutName": "appnameDesktop",
"allowElevation": true
}
}
}
Operating system: Windows 10
node version: 14.17.5
All help is appreciated

Related

Trying to generated the installers of electron app for windows and linux but it doesn't work

I'm using electron-builder through the electron-vue lib (https://github.com/SimulatedGREG/electron-vue).
And following the instructions to build the application in this documentation (https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html) using the command npm run build are appearing just these two files, one .snap and another .AppImage and I was thinking that should appear one .deb and another .exe for windows at least. Am I wrong?
My environment:
Node version: 16.15.1
NPM version: 8.11.0
vue-cli version:
vue: 2.6.11
vue-cli-plugin-electron-builder: 2.0.0
Operating System: linux ubuntu
My package.json:
{
"name": "simulans",
"version": "1.0.0",
"private": true,
"build": {
"productName": "simulans",
"appId": "lucaslgr.simulans",
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"directories": {
"output": "build"
},
"files": [
"dist/electron",
"node_modules/",
"package.json"
],
"mac": {
"icon": "./src/assets/img/simulans-icon.ico"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"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 --remote-debugging-port=9222",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"anim-event": "^1.0.17",
"big.js": "^6.1.1",
"core-js": "^3.6.5",
"cssprefix": "^2.0.17",
"eigen": "^0.2.0",
"fs": "*",
"fs-extra": "^10.1.0",
"leader-line": "^1.0.5",
"lodash.clonedeep": "^4.5.0",
"m-class-list": "^1.1.10",
"plain-draggable": "^2.5.14",
"plotly.js-dist-min": "^2.6.3",
"plotly.js-locales": "^2.8.1",
"pointer-event": "^1.0.2",
"vue": "^2.6.11",
"vue-router": "^3.0.3",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "^3.0.5",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"electron": "^13.0.1",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"skeleton-loader": "^2.0.0",
"vue-cli-plugin-electron-builder": "~2.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"prettier/prettier": 0
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

When trying to publish the extension, receive error: Part URI is not valid per rules defined in the Open Packaging Conventions specification

I'm trying to publish an extension by vsce, I logged in with the user access token,
after the build its create a file named 'NadavShaked.my-first-extension v1.0.968.vsix'
I'm trying to publish the extension to the marketplace by this command 'vsce publish' and received this error:
this is the guide I used
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
this is my azure-devops-extension.json file:
{
"manifestVersion": 1,
"id": "my-first-extension",
"publisher": "NadavShaked",
"version": "1.0.968",
"name": "my-first-extension",
"description": "Azure DevOps Extension",
"categories": [
"Azure Repos",
"Azure Boards",
"Azure Pipelines",
"Azure Test Plans",
"Azure Artifacts"
],
"targets": [ {
"id": "Microsoft.VisualStudio.Services"
} ],
"icons": {
"default": "logo.png"
},
"content": {
"details": {
"path": "overview.md"
}
},
"files": [ {
"path": "dist",
"addressable": true
} ]
}
this is my package.json file:
{
"id": "my-first-extension",
"name": "my-first-extension",
"publisher": "NadavShaked",
"version": "1.0.968",
"description": "Azure DevOps Extension",
"keywords": [
"extensions",
"Azure DevOps",
"Visual Studio Team Services"
],
"engines": {
"vscode": "^1.8.0"
},
"license": "MIT",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"clean": "rimraf ./dist",
"compile": "npm run clean && npm run test && webpack --mode production",
"compile:dev": "npm run clean && npm run test && webpack --mode development",
"build": "npm run compile",
"build:dev": "npm run compile:dev && npm run postbuild",
"postbuild": "npm run package-extension -- --rev-version",
"package-extension": "tfx extension create --manifest-globs azure-devops-extension.json src/Samples/**/*.json",
"publish-extension": "tfx extension publish --manifest-globs azure-devops-extension.json src/Samples/**/*.json",
"test": "set TEST_REPORT_FILENAME=test-results.xml && jest --verbose"
},
"dependencies": {
"#fluentui/react": "^8.36.3",
"azure-devops-extension-api": "~1.157.0",
"azure-devops-extension-sdk": "~2.0.11",
"azure-devops-ui": "~2.164.0",
"react": "~16.13.1",
"react-dom": "~16.13.1"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.11.0",
"#testing-library/react": "^10.4.4",
"#types/jest": "^26.0.3",
"#types/react": "~16.8.2",
"#types/react-dom": "~16.8.0",
"copy-webpack-plugin": "^7.0.0",
"base64-inline-loader": "~1.1.1",
"css-loader": "~1.0.0",
"jest": "^26.1.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^5.0.0",
"rimraf": "~2.6.2",
"sass-loader": "~10.0.5",
"style-loader": "~0.23.1",
"tfx-cli": "^0.6.3",
"ts-jest": "^26.1.1",
"ts-loader": "~5.2.2",
"typescript": "^3.9.6",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0"
},
"jest": {
"transform": {
"^.+\\.(js|ts|tsx|jsx)$": "ts-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native|azure-devops-ui|azure-devops-extension-sdk)/)"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
"\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
},
"preset": "ts-jest/presets/js-with-babel",
"testResultsProcessor": "./node_modules/jest-junit-reporter",
"collectCoverage": true,
"coverageReporters": [
"json",
"html",
"cobertura"
],
"globals": {
"ts-jest": {
"tsconfig": "tsconfig.test.json"
}
}
}
}
I upload the project to git my repo:
https://github.com/NadavShaked/vstsExtension/tree/master/vsts%20extension
this is the extension by run: 'vsce package'
https://easyupload.io/skwmep
this is the extension by run: 'npm run build'
https://easyupload.io/kzopux
I prefer to publish the second extension (npm run build command)
vsce is not the right command to publish to Azure devops.
In my package.json, I used npm run publish-extension or better npm run package-extension and published it by hand.

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
}
}
]
}
}

Why is contextBridge not being imported in my Electron app?

I'm writing an Electron app with React and Typescript, using Webpack, Babel and ESLint but I'm having trouble setting:
mainWindow = new BrowserWindow({
title: "Biomech",
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
sandbox: true,
preload: path.join(__dirname, "./preload.js"),
nativeWindowOpen: true,
},
});
which I want as a security measure.
The reason being that, if I set the webPreferences as specified above, I need to use contextBridge and a preload script that binds the functions that are using IPC to the window. And the problem is that contextBridge is not being properly imported in my preload.ts:
import { contextBridge, ipcRenderer } from "electron";
import { readFileSync } from 'fs';
import { History } from 'history';
import { LIST_DRIVE_FILES_CHANNEL, LOAD_PREV_TEST_RESULTS_CHANNEL, OAUTH2_ACCESS_TOKEN_REQUEST_CHANNEL } from "../src/constants/ipcChannels";
import { VISUALIZE_RESULTS_PATH } from "../src/constants/urls";
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"api", {
exchangeCodeForAccessToken: (code: string) => {
ipcRenderer.invoke(OAUTH2_ACCESS_TOKEN_REQUEST_CHANNEL, code);
},
listDriveFiles: (accessToken: string) => {
ipcRenderer.invoke(LIST_DRIVE_FILES_CHANNEL, accessToken);
},
openDirectoryDialog: (history: History) => {
ipcRenderer.invoke(LOAD_PREV_TEST_RESULTS_CHANNEL).then((dialog: any) => {
if (dialog.canceled) { // canceled with one l is correct
return;
} else {
const selectedDirectory = dialog.filePaths[0];
console.log(readFileSync(selectedDirectory + "/README.md", 'utf-8'));
history.push(VISUALIZE_RESULTS_PATH);
}
})
}
}
);
The way I see it it's properly used like the examples I've seen here in SO, or in the Electron docs. But when I run my main process script: npm run dev:electron which is specified in my package.json:
{
"name": "electron-react-ts-app",
"version": "1.0.0",
"description": "Electron + React + Typescript",
"main": "./dist/main.js",
"preload": "./dist/preload.js",
"scripts": {
"dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
"dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
"dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.js --mode development",
"build:electron": "NODE_ENV=production webpack --config webpack.electron.config.js --mode production",
"build:react": "NODE_ENV=production webpack --config webpack.react.config.js --mode production",
"build": "npm run build:electron && npm run build:react",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
},
"keywords": [],
"license": "MIT",
"build": {
"files": [
"dist/",
"node_modules/",
"package.json"
],
"productName": "Example",
"appId": "com.example.app",
"directories": {
"output": "dist"
}
},
"devDependencies": {
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#babel/preset-typescript": "^7.9.0",
"#types/electron-devtools-installer": "^2.2.0",
"#types/react-router-dom": "^5.1.7",
"#types/regenerator-runtime": "^0.13.0",
"dpdm": "^3.6.0",
"electron": "^11.2.1",
"electron-builder": "^22.7.0",
"electron-devtools-installer": "^3.1.1",
"eslint": "^7.18.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.1",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"react-router-dom": "^5.2.0",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
},
"dependencies": {
"#babel/core": "^7.12.10",
"#popperjs/core": "^2.6.0",
"#types/node": "^14.14.22",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"bootstrap": "^4.5.3",
"chokidar": "^3.5.1",
"core-js": "^3.8.3",
"css-loader": "^5.0.1",
"electron-fetch": "^1.7.3",
"fsevents": "^2.3.1",
"ini": "^2.0.0",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"style-loader": "^2.0.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
},
"lint-staged": {
"*.+(js|jsx)": "eslint --fix",
"*.+(json|css|md)": "prettier --write"
}
}
I get the following error: Cannot read property 'exposeInMainWorld' of undefined
webpack 5.19.0 compiled successfully in 1793 ms
App threw an error during load
TypeError: Cannot read property 'exposeInMainWorld' of undefined
at Object../electron/preload.ts (/Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:24:53)
at __webpack_require__ (/Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:128:41)
at /Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:252:11
at Object.<anonymous> (/Users/lucas_sg/Documents/ITBA/PF/pf-biomech/dist/preload.js:254:12)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
at Module.load (internal/modules/cjs/loader.js:992:32)
at Module._load (internal/modules/cjs/loader.js:885:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12738)
at Module.require (internal/modules/cjs/loader.js:1032:19)
I've checked out this repo regarding Electron security and it doesn't look like he's doing things too different, at least at first glance, but I'm clearly messing something up.
Here's my webpack config (webpack.electron.config.js) in case it's useful:
const path = require("path");
module.exports = [
{
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
devtool: "source-map",
entry: {
main: {
import: "./electron/main.ts",
dependOn: "preload"
},
preload: "./electron/preload.ts"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
},
target: "electron-main",
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
node: {
__dirname: false,
},
},
];
I think the issue resides in you webpack.config file:
entry: {
main: {
import: "./electron/main.ts",
dependOn: "preload"
},
preload: "./electron/preload.ts"
},
Might be that webpack tries to resolve all "preload.ts" dependency at compile time, plus tries to bundle it together with main.ts file. And in such case it will never get access to contextBridge. The preload.js file should only be run in a separate "context" - "Isolated World" as they refer in the docs.
What I would try is:
remove the dependOn: and preload: lines from you webpack config.
convert preload.ts file to JS (ie. to CommonJS format) - try doing that with TS CLI for now
Your preload.js file should look more or less like this:
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld(
'electron',
{
doThing: () => ipcRenderer.send('do-a-thing')
}
)
copy preload.js to a __dirname (in my case it was /dist)
run electron again
That was the only way I could access "contextBridge" object.

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