I would like to use puppeteer inside worker threads in my electron app. When building the bundle, I use extraFiles to copy worker code to Resources/bin. But unfortunately, it throws exception: "Cannot find module puppeteer" after running. What I had already tried:
Import puppeteer normally:
const puppeteer = require('puppeteer');
Import puppeteer in app.asar.unpack:
const puppeteerPath = path.resolve(
process.resourcesPath,
'app.asar.unpacked/node_modules/puppeteer/index.js'
);
const puppeteer = require(`${puppeteerPath}`);
Import puppeteer in app.asar:
const puppeteerPath = path.resolve(
process.resourcesPath,
'app.asar/node_modules/puppeteer/index.js'
);
const puppeteer = require(`${puppeteerPath}`);
Here is the repo which reproduce my case: https://github.com/alfredalfie123/test_worker
Could you please help me?
you need to copy all puppetter related deps to asar.unpack:
https://github.com/electron/electron/issues/18540#issuecomment-660679649
Related
I have a React Electron app with Webpack and try to build it into an executable.
I used the CLI commands of electron-packager and electron-builder which ran without errors.
But when I run the exe I get a blank screen and from terminal the error message:
(node:8172) electron: Failed to load URL: http://localhost:3000/main_window with error: ERR_CONNECTION_REFUSED
(Use mixmatch --trace-warnings ... to show where the warning was created)
Running with the option doesn't give any additional information.
Searching the source code for localhost leads to index.js in the webpack directory:
var createWindow = function () {
var preload = path_1.default.join(__dirname, '../renderer/main_window', "preload.js");
exports.mainWindow = new electron_1.BrowserWindow({
// show: false,
webPreferences: {
enableRemoteModule: false,
// nodeIntegration: false, // is default value after Electron v5
preload: preload // use a preload script
}
});
exports.mainWindow.loadURL('http://localhost:3000/main_window');
exports.mainWindow.maximize();
exports.mainWindow.webContents.openDevTools();
};
So I guess a server is being started, which probably is the same for every app, but the app is not allowed to access localhost.
So why does it seem to work easily for everyone else but not for me?
Once the build is created, you need to loadURL from build/index.html.
Replace your code of export.mainWindow.loadURL with this
e.g.
const isDev = require('electron-is-dev');
exports.mainWindow.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
);
I have upgraded my project to use workbox 6 and have modified my code accordingly.
After injecting manifest (generating serviceWorker.js) my browser reports error:
Service worker error TypeError: ServiceWorker script at
http://127.0.0.1:8080/serviceWorker.js for scope
http://127.0.0.1:8080/ threw an exception during script evaluation. app.js:218:23
I have removed code to determine what causes the error and am now left with:
serviceWorker.js (generated from serviceWroker-base.js)
importScripts('workbox-sw.js');
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';
const CACHE_DYNAMIC_NAME = 'dynamic-DEBUG-001'
webpack.config.js
const {InjectManifest} = require('workbox-webpack-plugin')
const workboxWebpackInjectPlugin = new InjectManifest({
swSrc: './serviceWorker.js'
})
// build WEBPACK CONFIG
const config = {}
//...
config.plugins = [
nodeEnvPlugin,
firebasePlugin,
cssExtractPlugin,
workboxWebpackInjectPlugin,
]
//...
return config
If I remove the imports of registerRoute and StaleWhileRevalidate in serviceWorker.js then the service worker registers successfully - but then I cannot register routes. ;) I have installed workbox-routing and workbox-strategies.
package.json
"scripts": {
"generate:sw": "workbox injectManifest"
},
"dependencies": {
...
"workbox-routing": "^6.0.2",
"workbox-strategies": "^6.0.2"
},
"devDependencies": {
...
"webpack": "^4.41.2"
}
generate:sw is the command I run to inject manifest and create serviceWorker.js.
My suspicion is that the imoprts are not handled correctly? How can I use registerRoute and StaleWhileRevalidate in my service worker?
Kind regards /K
The info at https://developers.google.com/web/tools/workbox/guides/using-bundlers might be helpful.
You don't need to include importScripts('workbox-sw.js');
If you plan on using precaching:
You can run InjectManifest via workbox-webpack-plugin and it will take care of both compiling your service worker (i.e. inlining the ES module imports into a final, runnable service worker file) as well as replacing a self.__WB_MANIFEST inside your service worker file with the actual precache manifest based on the assets in your webpack build.
If you don't plan on using precaching:
You can add your service worker file, including the ES module imports, as a entry point in your webpack config, and that should handle inlining the ES module imports into a final, runnable service worker file.
If you're already using webpack, then your workbox injectManifest step isn't needed. See the previous two points.
I am trying to get Highcharts working with Node/Puppeteer. Edited - just not able to get highcharts recognized by Node script.
var Highcharts = require('highcharts');
var fs = require('fs')
var puppeteer = require('puppeteer')
console.log('Highcharts.version=' + Highcharts.version)
console.log('fs W_OK=' + fs.W_OK)
console.log('Puppeteer preferred revision=' + puppeteer._launcher._preferredRevision)
Output:
Highcharts.version=undefined
fs W_OK=2
Puppeteer preferred revision=624492
Had installed highcharts via:
npm install -g highcharts
My issue with this simple script was not understanding npm install. I finally got my script to find 'highcharts' and see the version, though I had to do Highcharts().version instead of Highcharts.version. My misunderstanding had to do with installing locally or globally when installing with NPM.
Using the electron-boilerplate to create an .exe for windows, it needs to run a .bat file. However, using npm start it works but when it gets packaged with npm run release, it doesn't run the .bat
This is my code for the function
const spawn = require('child_process').spawn;
const bat = spawn('cmd.exe', ['/c', 'Install.bat']);
bat.stdout.on('data', (data) => {
var str = String.fromCharCode.apply(null, data);
addLog(data);
console.info(str);
});
bat.stderr.on('data', (data) => {
var str = String.fromCharCode.apply(null, data);
addLog(data,"error");
console.error(str);
});
bat.on('exit', (code) => {
console.log(`Exit ${code}`);
});
Already checked for child-process
When you run electron via npm start it will typically set the current working directory to the folder for the app (containing your package.json). So it will look for cmd.exe in that folder.
After you build the app and run it, the current working directory might be somewhere else, for example C:\\ (on Windows). You can find the current working directory with process.cwd().
To find the app folder regardless of how the app is running, Electron provides electron.app.getAppPath().
So you can use it like this:
const path = require('path');
const cmdPath = path.join(electron.app.getAppPath(),'cmd.exe');
const bat = spawn(cmdPath, ['/c', 'Install.bat']);
I am writing a package that loads additional data from the lib directory and would like to provide an easy way to load this data with something like this:
const dataPath = 'mypackage/data/data.json';
initializeMyLibrary(dataPath).then((_) {
// library is ready
});
I've made two separate libraries browser.dart and standalone.dart, similar to how it is done in the Intl package.
It is quite easy to load this data from the "browser" environment, but when it comes to the "standalone" environment, it is not so easy, because of the pub run command.
When the script is running with simple $ dart myscript.dart, I can find a package path using dart:io.Platform Platform.script and Platform.packageRoot properties.
But when the script is running with $ pub run tool/mytool, the correct way to load data should be:
detect that the script is running from the pub run command
find the pub server host
load data from this server, because there could be pub transformers and we can't load data directly from the file system.
And even if I want to load data directly from the file system, when the script is running with pub run, Platform.script returns /mytool path.
So, the question is there any way to find that the script is running from pub run and how to find server host for the pub server?
I am not sure that this is the right way, but when I am running script with pub run, Package.script actually returns http://localhost:<port>/myscript.dart. So, when the scheme is http, I can download using http client, and when it is a file, load from the file system.
Something like this:
import 'dart:async';
import 'dart:io';
import 'package:path/path.dart' as ospath;
Future<List<int>> loadAsBytes(String path) {
final script = Platform.script;
final scheme = Platform.script.scheme;
if (scheme.startsWith('http')) {
return new HttpClient().getUrl(
new Uri(
scheme: script.scheme,
host: script.host,
port: script.port,
path: 'packages/' + path)).then((req) {
return req.close();
}).then((response) {
return response.fold(
new BytesBuilder(),
(b, d) => b..add(d)).then((builder) {
return builder.takeBytes();
});
});
} else if (scheme == 'file') {
return new File(
ospath.join(ospath.dirname(script.path), 'packages', path)).readAsBytes();
}
throw new Exception('...');
}