Upgraded to macOS Monterey 12.3.1 and `playwright + electron` stopped working - how do I fix it? - node.js

We launch our Electron-based app like so:
test.beforeAll(async() => {
electronApp = await _electron.launch({
args: [
path.join(__dirname, '../'),
'--disable-gpu',
'--whitelisted-ips=',
'--disable-dev-shm-usage',
]
});
...
It used to work. Now the tests fail with this error message:
electron.launch: Timeout 30000ms exceeded.
61 | createDefaultSettings();
62 |
> 63 | electronApp = await _electron.launch({
| ^
You can see the tests at https://github.com/rancher-sandbox/rancher-desktop . To reproduce:
Set up:
git clone https://github.com/rancher-sandbox/rancher-desktop.git
npm i
To reproduce:
npm run test:e2e

This might be related to the node issue on Monterey 12.3.1 that it is already running on the default port 5000.
Try disabling "Airplay receiver" like this post, it worked for me.
"System Preference" -> "Sharing" -> "Airplay receiver"
Why nodeJS is not working on macOS Monterey?

Related

ERR_REQUIRE_ESM from webpack's importing an ESM package

I am building an app using Nx for modularisation and Geckos for the server part. With Nx' default Webpack 5 config for Node I get this error when running the app:
/Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:8
module.exports = require("#geckos.io/server");
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/node_modules/#geckos.io/server/lib/index.js from /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js not supported.
Instead change the require of index.js in /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js to a dynamic import() which is available in all CommonJS modules.
(...)
Here are steps to reproduce:
$ npx create-nx-workspace#latest nx-geckos-test
Need to install the following packages:
create-nx-workspace#latest
Ok to proceed? (y) y
✔ What to create in the new workspace · express
✔ Application name · geckos-server-app
✔ Use Nx Cloud? (It's free and doesn't require registration.) · No
> NX Nx is creating your v13.4.1 workspace.
To make sure the command works reliably in all environments, and that the preset is applied correctly,
Nx will run "npm install" several times. Please wait.
✔ Installing dependencies with npm
✔ Nx has successfully created the workspace.
$ npm run start
> nx-geckos-test#0.0.0 start
> nx serve
> nx run geckos-server-app:serve
chunk (runtime: main) main.js (main) 552 bytes [entry] [rendered]
webpack compiled successfully (26ac6f288b082854)
Debugger listening on ws://localhost:9229/70a1d9b4-af2b-4fc9-90f7-f3502e5fdf2e
Debugger listening on ws://localhost:9229/70a1d9b4-af2b-4fc9-90f7-f3502e5fdf2e
For help, see: https://nodejs.org/en/docs/inspector
Issues checking in progress...
Listening at http://localhost:3333/api
At this stage, the default Express app builds and runs.
Now I replace the contents of apps/geckos-server-app/src/main.ts to the Geckos server example from the README:
import geckos from '#geckos.io/server'
const io = geckos()
io.listen(3000) // default port is 9208
io.onConnection(channel => {
channel.onDisconnect(() => {
console.log(`${channel.id} got disconnected`)
})
channel.on('chat message', data => {
console.log(`got ${data} from "chat message"`)
// emit the "chat message" data to all channels in the same room
io.room(channel.roomId).emit('chat message', data)
})
})
...and install the geckos server package using
$ npm install #geckos.io/server
added 4 packages, and audited 785 packages in 7s
87 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Ok, time to run it again:
$ npm run start
> nx-geckos-test#0.0.0 start
> nx serve
> nx run geckos-server-app:serve
chunk (runtime: main) main.js (main) 610 bytes [entry] [rendered]
webpack compiled successfully (90920432a9d246ea)
Debugger listening on ws://localhost:9229/dc6d9e1a-1a15-432f-a46c-d2ac83b923ea
Debugger listening on ws://localhost:9229/dc6d9e1a-1a15-432f-a46c-d2ac83b923ea
For help, see: https://nodejs.org/en/docs/inspector
/Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:8
module.exports = require("#geckos.io/server");
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/node_modules/#geckos.io/server/lib/index.js from /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js not supported.
Instead change the require of index.js in /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js to a dynamic import() which is available in all CommonJS modules.
at Object.#geckos.io/server (/Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:8:18)
at __webpack_require__ (/Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:32:41)
at /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:45:18
at /Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:59:3
at Object.<anonymous> (/Users/hgrzeskowiak/hugo-game/fresh-nx-geckos/nx-geckos-test/dist/apps/geckos-server-app/main.js:64:12)
I tested quite a few Webpack config overrides and using type: "module" in package.json, but to no avail. The output main.js looks mostly the same no matter what webpack settings I change. Things I tried changing in the app's webpack override config:
module.exports = function(webpackConfig, context) {
webpackConfig.target = "async-node16";
webpackConfig.output.libraryTarget = "module";
webpackConfig.output.library = {type: "module"};
webpackConfig.output.chunkFormat = "module";
webpackConfig.experiments.outputModule = true;
console.log("webpack config:");
console.log(webpackConfig);
console.log("module rules:");
console.log(webpackConfig.module.rules);
return webpackConfig;
}
The console logs in the config verify that the script is being run.
The app works when I manually change the require to import in the transpiled output, but that's not a sustainable solution.
I suspect the error has something to do with Geckos being an ESM package, and Webpack only using require instead of import as it should, but I couldn't find any way of changing that behaviour.
Any ideas?
Node version 16.13.0
Nx version 13.4.1
Webpack (transitive dep of Nx): 5.65.0
Here's the cleanest solution I could find that works with Type Script versions older than 4.6 (which should add support for this feature). This is essentially patching ESM support into WebPack with older TypeScript versions (including latest at the time of writing).
A custom Webpack plugin that changes the type of the external module to import.
// TypeScript before version 4.6 does not support transpiling ESM imports to
// `import()`, but uses `require()` instead. NodeJS does not support the use
// of `require() for ECMAScript modules (ESM).
//
// Good reads:
// https://www.typescriptlang.org/docs/handbook/esm-node.html
// https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#esm-nodejs
/**
* A Webpack 5 plugin that can be passed a list of packages that are of type
* ESM. The typescript compiler will then be instructed to use the `import`
* external type.
*/
class ESMLoader {
static defaultOptions = {
esmPackages: "all"
};
constructor(options = {}) {
this.options = { ...ESMLoader.defaultOptions, ...options };
}
apply(compiler) {
compiler.hooks.compilation.tap(
"ECMAScript Module (ESM) Loader. Turns require() into import()",
(
compilation
) => {
compilation.hooks.buildModule.tap("Hello World Plugin", (module) => {
if (
module.type === "javascript/dynamic" &&
(
this.options.esmPackages === "all" ||
this.options.esmPackages.includes(module.request)
)
) {
// All types documented at
// https://webpack.js.org/configuration/externals/#externalstype
module.externalType = "import";
}
}
)
;
}
);
}
}
module.exports = function(webpackConfig, context) {
// NodeJS supports dynamic imports since version 12.
webpackConfig.target = "node16";
webpackConfig.plugins.push(
// Manually specify the ESM modules or leave blank for using `import()`
// on all packages.
//new ESMLoader()
new ESMLoader({esmPackages: "#geckos.io/server"})
);
return webpackConfig;
};
The custom webpack config can be set on an Nx app through the project.json:
{
"targets": {
"build": {
"executor": "#nrwl/node:build",
"options": {
...
"webpackConfig": "apps/your-app/webpackConfig.js"
},
...
This solution also requires tsconfig.json to have set the module type to something more modern than commonjs, e.g. es2020:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"module": "es2020",
"types": ["node"],
},
"exclude": ["**/*.spec.ts", "**/*.test.ts"],
"include": ["**/*.ts"]
}
Once this is done, the built file can be ran using the usual nx serve.

Jest detects open redis client on travis-ci

I encountered some difficulties with redis testing on travis-ci.
Here is the redis setup code,
async function getClient() {
const redisClient = createClient({
socket: {
url: redisConfig.connectionString,
reconnectStrategy: (currentNumberOfRetries: number) => {
if (currentNumberOfRetries > 1) {
throw new Error("max retries reached");
}
return 1000;
},
},
});
try {
await redisClient.connect();
} catch (e) {
console.log(e);
}
return redisClient;
}
Here is the travis config, note that I run npm install redis because it is listed as a peer dependency.
language: node_js
node_js:
- "14"
dist: focal # ubuntu 20.04
services:
- postgresql
- redis-server
addons:
postgresql: "13"
apt:
packages:
- postgresql-13
env:
global:
- PGUSER=postgres
- PGPORT=5432 # for some reason unlike what documentation says, the port is 5432
jobs:
- NODE_ENV=ci
cache:
directories:
- node_modules
before_install:
- sudo sed -i -e '/local.*peer/s/postgres/all/' -e 's/peer\|md5/trust/g' /etc/postgresql/*/main/pg_hba.conf
- sudo service postgresql restart
- sleep 1
- postgres --version
- pg_lsclusters # shows port of postgresql, ubuntu specific command
install:
- npm i
- npm i redis
before_script:
- sudo psql -c 'create database orm_test;' -p 5432 -U postgres
script:
- npm run test-detectopen
The first issue is this missing client.connect function, whereas connection on my local machine with redis-server running works.
console.log
TypeError: redisClient.connect is not a function
at Object.getClient (/home/travis/build/sunjc826/mini-orm/src/connection/redis/index.ts:21:23)
at Function.init (/home/travis/build/sunjc826/mini-orm/src/data-mapper/index.ts:33:30)
at /home/travis/build/sunjc826/mini-orm/src/lib-test/tests/orm.test.ts:25:20
at Promise.then.completed (/home/travis/build/sunjc826/mini-orm/node_modules/jest-circus/build/utils.js:390:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/travis/build/sunjc826/mini-orm/node_modules/jest-circus/build/utils.js:315:10)
at _callCircusHook (/home/travis/build/sunjc826/mini-orm/node_modules/jest-circus/build/run.js:181:40)
at _runTestsForDescribeBlock (/home/travis/build/sunjc826/mini-orm/node_modules/jest-circus/build/run.js:47:7)
at run (/home/travis/build/sunjc826/mini-orm/node_modules/jest-circus/build/run.js:25:3)
at runAndTransformResultsToJestFormat (/home/travis/build/sunjc826/mini-orm/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:166:21)
The second is this open handle issue, on my local machine, even if connection fails, jest does not give such an error and exits cleanly.
Jest has detected the following 1 open handle potentially keeping Jest from exiting:
● TCPWRAP
7 |
8 | async function getClient() {
> 9 | const redisClient = createClient({
| ^
10 | socket: {
11 | url: redisConfig.connectionString,
12 | reconnectStrategy: (currentNumberOfRetries: number) => {
at RedisClient.Object.<anonymous>.RedisClient.create_stream (node_modules/redis/index.js:196:31)
at new RedisClient (node_modules/redis/index.js:121:10)
at Object.<anonymous>.exports.createClient (node_modules/redis/index.js:1023:12)
at Object.getClient (src/connection/redis/index.ts:9:23)
at Function.init (src/data-mapper/index.ts:33:30)
at src/lib-test/tests/orm.test.ts:25:20
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:387:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:408:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:261:3)
It turns out that this is likely caused by redis being a peer dependency.
Listing out node-redis versions, I'm guessing the version tagged latest (as of time writing 3.1.2) was installed instead of the version 4+.
So, I moved redis to regular dependencies instead.

Could not find expected browser chrome locally

This Meteor code uses "puppeteer 8.0.0", "puppeteer-core 10.0.0", puppeteer-extra 3.1.18" and "puppeteer-extra-plugin-stealth 2.7.8", It gives this error:
Error: Could not find expected browser (chrome) locally. Run npm install to download the correct Chromium revision (884014).
Tried "npm install" for no avail. Reading up online, tried removing "puppeteer-core": "^10.0.0" from package.json dependencies for no avail.
Any help is much appriciated. Thanks
const puppeteer = require('puppeteer-extra');
const nameH = require('./NameH');
const puppeteerOptions = {
headless: true,
ignoreHTTPSErrors: true,
args: ['--no-sandbox', '--single-process', '--no-zygote', '--disable-setuid-sandbox']
}
let browser;
let pageNameH;
const init = async () => {
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
console.log('1') //>>>>>>>>>>>> Prints 1
puppeteer.use(StealthPlugin());
console.log('2') //>>>>>>>>>>>> Prints 2
browser = await puppeteer.launch(puppeteerOptions);
console.log('3') //>>>>>>>>> DID NOT PRINT <<<<<<<<<<<<<<<
pageNameH = await browser.newPage();
console.log('4')
await pageNameH.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');
await pageNameH.setViewport({ width: 1366, height: 768 });
await pageNameH.setRequestInterception(true);
blockResources(pageNameH);
}
const blockResources = page => {
page.on('request', (req) => {
if (req.resourceType() == 'stylesheet' || req.resourceType() == 'font' || req.resourceType() == 'image') {
req.abort();
}
else {
req.continue();
}
});
}
export const abc = async (nm, loc) => {
try {
console.log('name try') //>>>>>>>>>>>> Prints "name try"
if (!(browser && pageNameH))
await init();
//use "required" nameh here
} catch (error) { // print the error <<<<<<<<<<<<<<<<<<<<<<<<<
console.log("Could not launch Puppeteer or open a new page.\n" + error);
if (browser && browser.close === 'function') await browser.close();
}
}
// included in package.json
"dependencies": {
"#babel/runtime": "^7.11.2",
"axios": "^0.21.1",
"check": "^1.0.0",
"cheerio": "^1.0.0-rc.6",
"jquery": "^3.5.1",
"meteor-node-stubs": "^1.0.1",
"nightmare": "^3.0.2",
"pending-xhr-puppeteer": "^2.3.3",
"puppeteer": "^8.0.0",
"puppeteer-core": "^10.0.0",
"puppeteer-extra": "^3.1.18",
"puppeteer-extra-plugin-adblocker": "^2.11.11",
"puppeteer-extra-plugin-block-resources": "^2.2.9",
"puppeteer-extra-plugin-stealth": "^2.7.8"
},
may be you can try this, it works for me on linux(centOS), puppeteer(10.2.0).
cd ./node_modules/puppeteer
npm run install
If that fails, you can also try running:
cd ./node_modules/puppeteer
npm install
This will download the chromium to ./node_modules/puppeteer/.local-chromium
I had the same problem. I checked my env variables, and even though PUPPETEER_SKIP_CHROMIUM_DOWNLOAD was set to false, it was still not working. After I removed the variable (unset PUPPETEER_SKIP_CHROMIUM_DOWNLOAD for mac), it worked.
related dependancies:
"dependencies": {
"chrome-aws-lambda": "^10.0.0",
"puppeteer-core": "^10.0.0",
},
"devDependencies": {
"puppeteer": "^10.0.0",
}
Launching Chromium:
import chromium from "chrome-aws-lambda";
const browser = await chromium.puppeteer.launch({
executablePath: await chromium.executablePath,
});
Fixed it by running this command to install chromium manually.
node node_modules/puppeteer/install.js
if you are testing locally, make sure you have puppeteer installed as dev dependencies. specifically
npm install puppeteer --save-dev
https://github.com/alixaxel/chrome-aws-lambda/wiki/HOWTO:-Local-Development#workaround
this approach allows us to rely on puppeteer for local development and puppeteer-core for production deployments.
I had the same issue. What worked for me was to specify as the executablePath Puppeteer launch option the fullpath to the local chromium used by Puppeteer.
Something like this:
const launchOptions = {
// other options (headless, args, etc)
executablePath: '/home/jack/repos/my-repo/node_modules/puppeteer/.local-chromium/linux-901912/chrome-linux/chrome'
}
As noted in another answer, it seems that also referencing a chromium local binary would work, but I think it's a worse solution, since Puppeteer is guaranteed to work only with the local bundled version of Chromium.
Throwing my answer in, in hopes that it helps someone not waste their entire evening like I did.
I was writing a Typescript server that used Puppeteer, and I'm using ESBuild to transpile from TS to JS. In the build step, esbuild was trying to bundle everything into one file, but I had to instruct it to preserve the Puppeteer import from node_modules.
I did this by marking puppeteer as external. See docs here.
Since npm i downloads a compatible version of chromium to the node_modules folder, once I preserved this import, it was able to find Chromium in the node_modules folder.
My build file looks like:
require("esbuild").buildSync({
entryPoints: ["src/index.ts"],
outdir: "build",
bundle: true,
platform: "node",
target: "node16",
external: ["puppeteer"],
});
And I run it with node prod-build.js.
Now in my code, I can just call launch!
const browser = await puppeteer.launch()
I used the installed version on my pc (maybe not what you're looking for)
const browser = await puppeteer.launch({headless:false, executablePath:
'C:/Program Files/.../chrome.exe' });
You may need to install some dependencies depending on your OS. Check Puppeteer's Troubleshooting page for more details.
I was having this error too and I noticed that I started getting such an error after updating my node from my Dockerfile to version ^16 (my puppeteer is in a container). How did I solve it? I downgraded my node from Dockerfile to version 12.
Hope this resolves it...
OBS: I use Ubuntu 21.04 in machine.
EDIT ------
In newest versions of node, you need to go in ./node_modules/puppeteer and run command npm install, then the correct packages will be installed.
I'm using that solution.
If you are using puppeteer in AWS SAM and you don't have puppeteer in dependencies, you can install the same in puppeteer-core using
node node_modules/puppeteer/install.js
For this setup to work you will have to add chrome-aws-lambda in the devDependencies.
"devDependencies": {
"chrome-aws-lambda": "^10.1.0"
}
Also before you take it to production don't forget to add the layer in your template.yaml file:
Layers:
- !Sub 'arn:aws:lambda:ap-south-1:764866452798:layer:chrome-aws-lambda:25'

Google closure gives error while javascript minificatation

I am using google-closure-compiler grunt task to minify javascript files. I've defined task like : -
'closure-compiler': {
deviceDetails: {
files: {
'target.min.js: 'source.js'
},
options: {
compilation_level: 'SIMPLE'
}
// args: [
// '--js', 'source.js',
// '--compilation_level', 'SIMPLE',
// '--js_output_file', 'out.js',
// '--debug'
// ]
}
This gives me an error
[ { '29': 1,
_state: 2,
_result: [Error: not implemented],
_subscribers: [] } ]
Warning: Compilation error Use --force to continue.
Aborted due to warnings.
Earlier I was facing promise issue , for that I installed pollyfill module.
require('es6-promise').polyfill();
I am running npm 1.3.10 version and Unfortunately, I can't upgrade it right now.
Also , followed alternative approach of using args.. still facing same error.
So after bit analysis, I am using below two grunt plugin's
1. grunt-closure-tools
2. google-closure-compiler
Its was a problem with legacy npm version.

Gulp inject: Segmentation Fault

I have manjaro linux and I installed nodejs and npm from official repositories
node version: v6.2.1
npm version: 3.9.5
gulp.task('inject', ['scripts', 'styles'], function () {
var injectStyles = gulp.src([
path.join(conf.paths.tmp, '/serve/app/**/*.css'),
path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
], { read: false });
var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
])
.pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));
var injectOptions = {
ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
addRootSlash: false
};
return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});
When I run:
$ gulp serve
It display me:
[21:36:37] Using gulpfile /home/jics/Documents/Proyect/gulpfile.js
[21:36:37] Starting 'config'...
[21:36:37] Starting 'styles'...
[21:36:37] Finished 'config' after 236 ms
[21:36:37] Starting 'scripts'...
[21:36:37] gulp-inject 30 files into index.scss.
[21:36:39] Finished 'styles' after 2.36 s
[21:36:40] all files 211.97 kB
[21:36:40] Finished 'scripts' after 2.84 s
[21:36:40] Starting 'inject'...
[21:36:40] gulp-inject 1 files into index.html.
Segmentation fault
My coredumctl display me:
PID: 29909 (gulp)
UID: 1000 (jics)
GID: 1000 (jics)
Signal: 11 (SEGV)
Timestamp: lun 2016-06-13 18:03:49 CLT (3h 37min ago)
Command Line: gulp
Executable: /usr/bin/node
Control Group: /user.slice/user-1000.slice/session-c2.scope
Unit: session-c2.scope
Slice: user-1000.slice
Session: c2
Owner UID: 1000 (jics)
Boot ID: 857cb1e6f9134beb91d172fc85f05f36
Machine ID: 50f47fe8f80b4f92829b61933e8b309e
Hostname: jics-pc
Coredump: /var/lib/systemd/coredump/core.gulp.1000.857cb1e6f9134beb91d172fc85f05f36.29909.1465
Message: Process 29909 (gulp) of user 1000 dumped core.
Stack trace of thread 29909:
#0 0x00002080c7ca188c n/a (n/a)
The only why I can run gulp serve with success is deleting de follow line from de configuration file .pipe($.inject(injectScripts, injectOptions))
Well I did do it with n
$ sudo npm install -g n
$ sudo n stable
install : node-v6.2.1
mkdir : /usr/local/n/versions/node/6.2.1
fetch : https://nodejs.org/dist/v6.2.1/node-v6.2.1-linux-x64.tar.gz
######################################################################## 100,0%
installed : v6.2.1
Finally I do $ gulp serve and run perfectly

Resources