How to use esm with electron 16?
When I make the type in package.json to module, the script electron . doesnt work well.
{
"name": "electronapp",
"version": "1.0.0",
"main": "main.js",
"type": "module",
...
}
I stumbled upon the same problem when trying to create a new project with Vue 3 and Vite in electron. I found a nice starter template at GitHub.
Unfortunately, with the first update of the packages, there was the problem that some of the packages had switched to pure ESM.
The problem that electron has with ESM is very clear from the issue on GitHub: https://github.com/electron/electron/issues/21457.
Electron use ESM, but not for the files it receives via the config. Electron tries to include these files with "require", which fails.
However, a solution is also presented, which can be used well.
Point your eletron toward a cjs file.
In package.json:
"type": "module",
"main": "main.cjs"
In main.cjs:
import('./application.mjs');
After that, to import electron, use this in your esm part:
const require = createRequire(import.meta.url);
const { BrowserWindow, app: electronApp, ipcMain } = require('electron');
But this is only a rough outline of the solution. I forked the starter package and installed the solution there in the ESM branch: https://github.com/studioalex/electron-vue-template/tree/ESM.
Related
We have a custom ExtJS CMD package created and used for main application. CMD package uses external js that is already minified/compressed. However on production build for app ExtJS again compresses already compressed file, leading to errors in app wherever those external resources are referenced.
Do we have any flag that turns of compression in package.json for externally included resources?
Well, one answer would be to simply not package the external JS with your app, but to serve it separately. Guessing that's not what you want to do, though...
So, to package the file and not have it be compressed, you edit the app.json. In particular, the production block, where there should be a js entry. Make it look something like this:
"production": {
"js": [
{"path": "app.js", "bundle": true},
{"path": "external_file_that_should_not_be_compressed.js", "compress": false }
],
...
},
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 new to Dart/Visual studio code and have hit a wall setting up one of the predefined stagehand apps "web-angular".
I've installed the dart language support extension and created a new folder called c:\webdev\Angular_dart . From within the terminal in VSCode i ran "stagehand web-angular", then "pub get" then "pub global run webdev serve web:8888"
I'm able to see the default web page (a todo list) but when I hit F5 from within VSCode it gives me an error saying it can't see any of the files in my lib folder.
The first one it hits is..
web/main.dart:2:8: Error: Error when reading 'lib/app_component.template.dart': The system cannot find the file specified.
import 'package:Angular_Dart/app_component.template.dart' as ng;
it looks like my .packages file is setup correctly as my last line reads
Angular_Dart:lib/
And my launch.json configuration is
"name": "Dart",
"program": "web/main.dart",
"request": "launch",
"type": "dart"
Has anyone seen this?
Thanks in advance.
Right now it's simple. Use following configuration:
{
"name": "Dart",
"program": "web/index.html",
"request": "launch",
"type": "dart"
}
VS Code: 1.50.1
Dart SDK: 2.11.0-213.1.beta
Make sure "program" points to the index HTML file.
Edit: This answer is out of date, see theanurin's answer above or the Dart-Code v3.7 release notes.
The Dart VS Code extension doesn't currently have first-class support for web apps so unfortunately it's not as simple as just hitting F5 like for Flutter or CLI projects.
There are some relevant discussions here:
https://github.com/Dart-Code/Dart-Code/issues/386
https://github.com/dart-lang/build/issues/1025
The Flutter Devtools app is somewhat set up for this, and has VS Code tasks and launch configs to launch with webdev serve:
https://github.com/flutter/devtools/tree/master/packages/devtools/.vscode
The build config uses the Chrome Debugger for launching the browser, but has a preLaunchTask that runs webdev serve. It works, but the debugging isn't perfect, it's using source maps via the Chrome Debugger extension.
Why on earth can I not move my main.js file into a sub directory and have electron build from the that sub directory? for instance my file structure:
app
|_package.json
|_node_modules
|_src
|_main.js
|_index.html
|_renderer.js
|_...
My package.json:
"main":"main.js",
"scripts" : {
"start": "electron ./src"
}
When I run start electron launches the intro screen("to start your application run ...") and not the application I created at ./src. Is there a package out there that allows for this to happen? is there something I'm missing in the package.json file?
Been a while since I posted to SO but this one got me stumped / its not clearly documented on Electron's site(you'd think it would be in architecture). I do see in the quickstart about file structure but it doesn't say I can't do as I illustrated above^ It's not really a big deal I just hate when Im forced into a specific file structure.
The Electron application I am developing makes also use of a main.js file located in a sub-directory, and this is how it would be documented in your package.json file:
"main":"src/main.js",
"scripts" : {
"start": "electron ."
}
I guess this is because npm needs the correct relative path of the startup script in package.json...
There may be also some relevant information in Writing Your First Electron App.
I am trying to install some js files via bower. My repo has a bower.json with a main property, however the whole repo gets installed to components/, not just the files in the dist/custom/ dir.
Here is what my bower.rc looks like
{
"name": "jquery-m",
"version": "2.0.2mup",
"description": "Meetup custom build of jQuery 2.0, used on mobile",
"main": [ "./dist/custom/" ],
"license": "MIT"
}
Is this the way bower is supposed to work? I thought it was possible just to specify certain files with your main property.
Yes, this is how Bower is meant to work. Bower-installer looks like a more lightweight solution than Grunt to solve the exact requirement you're describing and get just the files you need to be deployed to production.
Yes, that's how Bower works.
It always look for the matching tag on the repo; if cannot find one, it goes with the default branch, and download it.
The unique usage I've seen so far for the main property of a bower.json file is for integration, for example with build tools, like Grunt (there are lots of other bower related tasks, just Google around) and others.
This is a common misconception.
As stated in Bower documentation, the main property is a string/array listing the primary endpoints of your package.
Bower package maintainers (and maybe users, using the overrides property) can use the ignore property, which is an array of paths not needed in production that you want Bower to ignore when installing your package.
Example:
{
"name": "stackoverflow",
"version": "1.0.0",
"ignore": [
"test/**",
".jshintrc"
],
"dependencies": {
"foo": "~1.1"
}
}