I would like to use worker thread in my electron app. In my developer environment it is working, but after building the app with electron-builder, the javascript file that contains the worker thread code cannot be loaded by the Worker class.
It seems, the Worker class cannot load the js from the asar file.
error popup
After I turned off the asar packaging, it's working (but using without asar packaging is not recommended so it's not an acceptable solution for me).
There is a minimal example to reproduce the problem.
versions:
"devDependencies": {
"electron": "7.1.2",
"electron-builder": "22.2.0"
}
Did I something wrong? Is there any workaround to resolve this problem?
Related
I am using electron-builder to package an application and I'm looking for a way to guard against the following mistake:
My electron app has a main process dependency required in production, but I mistakenly listed it in devDependencies. I don't notice this during development because the module is installed in my development environment.
After building the production version and launching it, an alert dialog will pop-up with an Error: cannot find module stacktrace.
I'm looking for an automated way to catch/prevent this mistake.
What I tried so far:
After building with electron-builder, I have an automated test that launches the production app as a node child_process.spawn and then connects to it using puppeteer. And I have a process.on('uncaughtException') listener in the main process.
Since this error is raised from the require stack, it appears to not get handled by this listener. Also, the error creates an alert dialog box that blocks execution of the spawned process until the box is closed (something I don't know how to do in a CI environment) which means the test hangs and times-out without providing useful feedback.
I'm using electron-builder to package the main process dependencies and vite to bundle the renderer dependencies.
On Mac, when I run my app from WebStorm, exiftool-vendored works great. However, when I build my app (I use electron-builder) and install it on the same Mac, it never returns, even just trying to get the version:
exiftool.version().then(version => writeBreadcrumb('exif', version))
In other words, no error is raised, and the then is never executed when running an installed version of my app, though it works fine running my app from WebStorm (with cd build && electron .)
What am I doing wrong? Is there an example anywhere of how to use exiftool-vendored in an electron app?
You should take a look at what the docs say about making it work with Electron:
How do you make this work with electron?
Electron is notoriously brittle and buggy, and is not officially supported by this package. Although PhotoStructure uses this package within electron, there's a nontrivial amount of auxiliary support code specific to that project to make it work smoothly.
If you're still anxious to try, here are some things to keep in mind:
Note that this package will spawn exiftool external processes, which means the exiftool-vendored.pl and exiftool-vendored.exe packages should be included in your asarUnpack. SmartUnpack might work, but if it doesn't use a pattern like node_modules/{exiftool-vendored.*}/**/*.
If you're requiring exiftool-vendored from within a webview, you're gonna have a bad time. Many things won't work due to a lack of node compatibility within electron.
__dirname at runtime from within an asar package after webpacking will be invalid, so don't rely on that.
— https://github.com/photostructure/exiftool-vendored.js/wiki/FAQ#how-do-you-make-this-work-with-electron
Since I never found a way to get exiftool-vendored to work with electron on Mac, I accepted the above answer, as essentially a warning to steer clear of exiftool-vendored for electron on Mac.
This answer is included for completeness, for those of us who need exiftool in an electron app for both Mac and Windows:
I used node-exiftool with these settings added in package.json for electron-builder:
"build": {
...
"win": {
...
"extraResources": "exiftoolwin/**/*"
},
"mac": {
...
"extraResources": "exiftool/**/*"
}
}
In the root of my project, I added folders exiftoolwin and exiftool. In exiftoolwin, I put exiftool.exe which I obtained by following the Windows Stand-Alone Executable instructions here, and in my exiftool folder I put exiftool and lib which I obtained by extracting the full perl distribution on Mac, as described on the same page.
Then, in my .jsx (I'm using React):
import exiftool from 'node-exiftool';
const exiftoolFolderAndFile = process.platform === 'win32' ? 'exiftoolwin/exiftool.exe' : 'exiftool/exiftool';
const exiftoolPath = path.resolve(__dirname, '../..', exiftoolFolderAndFile);
const ep = new exiftool.ExiftoolProcess(exiftoolPath);
Then I just use ep as described here.
This is working for us:
add this dependency:
"exiftool-vendored": "^15.2.0",
Update package.json "build" section for mac ( not needed for windows as far as we can see )
"build": {
"mac": {
...
"asarUnpack": [
"node_modules/exiftool-vendored/**" ,
"node_modules/exiftool-vendored.pl/**"
]
}
}
I'm trying to integrate material-components-web from Material.io. But it turned out to be quite a hassle. I'm also very new to the Node world, so i'm learning as i try a long.
This is what i did so far:
Coupled NPM to Visual Studio 2017, I can use a lot of functionalities, but it doesn't really work like i imagined. Npm init for example hangs, but install/update commands work fine.
Got a Packag.json with the following dependencies:
"devDependencies": {
"material-components-web": "0.44.1",
"gulp": "3.9.1",
"gulp-util": "3.0.8",
"gulp-minify-css": "1.2.4",
"gulp-path": "4.0.0",
"gulp-js-minify": "0.0.3",
"gulp-sass": "3.1.0",
"gulp-flatten": "0.4.0"
}
Installed Gulp and set up my Sass compiler and css/js minifier(for production). And set them up to run before i build my project
I have my #material folder with all the basic components in it. But now i'm running into the problem of the Javascript module dependencies.
I noticed that the standard 'require' methods where not working because it it a node specific resolver (Correct me if I'm wrong). First I tried to integrate Babel in gulp to transform the imports to ECMA. But that seemed unsuccessful.
Now i am converting all the import/exports by hand (so updating is a no go). It started out working great. But now i'm getting tangled up in dependencies hell, with references and imports all over the place... From dependencies like (focus-trap.js, tabbale and xtend)
Is this even possible to integrate in ASP.NET MVC? I also noticed that Material-components-web is starting to switch to TypeScript on their github!
Any tips or help are really appreciated.
I ended up doing the following to be able to use material-components-web for the front-end:
Downloaded Node.Js and added the NPM location as a 3rd party reference to Visual studio 2017.
Added the node_modules folder to my project and ran npm-install
Copied all the dependencies (Except 'Babel' the transpiler). And installed them with NPM
Created a WebPack config for compilation, extraction etc. etc.
It was actually pretty basic, but without any knowledge and information to use this type of NPM packages in an older MVC project was quite a big hassle to find out.
If somebody needs more informations or help, just comment below.
I had integrated OpenTok.js library for video call in my electron app, for which i want to use logitech device and to use it i need node-hid library using which my app can detect device.
I had done all the needful mentioned for using node-hid in Electron projects, package did get installed
but when i require it in my js file using :-
var HID = require('node-hid');
var devices = HID.devices();
And run my app , it gives an error
Error: Module version mismatch. Expected 50, got 51. So please help me
with this issue .
Thanks
Use electron-rebuild for rebuild modules for suitable for electron. Some node modules are not exactly suitable for electron, because electron uses it's own build of Node. So, electron-rebuild will sort out any incompatibility or functional issues of node modules we use. The recommended way it to add "postinstall": "electron-rebuild --force" line to scripts of package.json file.
One other thing, on linux when you run dev mode, you have to run the script as sudo. Otherwise it'll rise another issue like cannot open device with path...
hope this help someone... :)
I encountered this issue myself, and thought I would share the solution that worked for me. #Tharanga is correct - the recommended way to get around this is to include the below in package.json "scripts" section:
"postinstall": "electron-rebuild --force"
However, I have experienced inconsistent success with that approach.
Another approach is, after installing "node-hid", run this (if on mac):
.\node_modules\.bin\electron-rebuild
Or for Windows:
.\node_modules\.bin\electron-rebuild.cmd
Finally, if you are using webpack in your project, you must add this line to your webpack.config.js file (within module.exports block):
externals: {
"node-hid" : 'commonjs node-hid'
}
I hope this helps some folks in the future!
I've been thinking about using React as the frontend for a Grails application, but I'm having a bit of trouble getting started.
So far, I've become accustomed to write a React app using Node/NPM with the help of Webpack, and that's been pretty easy because there is plenty of documentation for that setup.
However, I'm struggling to find anything concrete integrating React seamlessly with Grails.
Ideally, I would just do grails run-app and it should take care of everything. I do not want other team members to worry about starting up two different servers or something along those lines.
Please let me know if anyone has done this before.
Webpack can be configured to work quite well with Grails. The key is to have webpack generate its bundle whenever the app is started up, and to output the bundle in a directory where it can be served from the GSP. You do not want your source JavaScript (I.e, React/ES6 code) in the asset pipeline if your using Webpack, instead you want to keep those source files in another directory (such as src/webapp), and configure Webpack to bundle these files and output the result to the asset pipeline (assuming you're using AP at all).
Here's an example configuration for Webpack:
var path = require('path');
module.exports = {
entry: {
index: './src/webapp/index.js'
},
output: {
path: './grails-app/assets/javascripts',
publicPath: '/assets/',
filename: 'bundle.js'
},
Finally, to achieve the integrated webpack/Grails startup, you can use the Gradle node plugin and attach the webpack run script to the application startup in a custom task in your build.gradle (this is assuming that you have a npm script named "webpack" defined to run webpack)
assetCompile.dependsOn(['npmInstall', 'npm_run_webpack'])
Please note that if you want to run webpack in "watch" mode, you'll need to do that seperately from starting up the Grails app, so that that script can run continuously (there actually is support for this in the Gradle mode plugin but it's currently broken).
See this link for a more in-depth explanation of this approach, with a sample application: http://grailsblog.objectcomputing.com/posts/2016/05/28/using-react-with-grails.html
Also checkout the React profile for Grails 3: https://github.com/grails-profiles/react
It has not been released yet but should be in the next few days. It makes use of the same approach outlined here and in the linked post.
You could use npm's scripts feature to combine all steps necessary to start up the development environment into a single command, e.g.:
// package.json
{
...
"scripts": {
"start": "npm start-grails & npm start-react",
"start-grails": "grails run-app",
"start-react": "node server.js"
},
...
}
Now all it takes is a simple npm start to launch all relevant applications.