webpack + zeromq === fail

[devzzzero]

test-ui.zip

webpack complains of The "path" argument must be of type string. Received undefined

What is the current behavior?
Webpack fails to load with

App threw an error during load
Error: Failed to load zeromq.js addon.node: TypeError: The "path" argument must be of type string. Received undefined
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at Object.join (node:path:1244:7)
    at findAddon (/home/work/test-app/test-ui/.webpack/main/index.js:2182:70)
    at ./node_modules/zeromq/lib/load-addon.js (/home/work/test-app/test-ui/.webpack/main/index.js:2211:15)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./node_modules/zeromq/lib/native.js (/home/work/test-app/test-ui/.webpack/main/index.js:2231:38)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./node_modules/zeromq/lib/index.js (/home/work/test-app/test-ui/.webpack/main/index.js:1550:16)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./src/core/LogWatcher.ts (/home/work/test-app/test-ui/.webpack/main/index.js:1140:26)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at findAddon (/home/work/test-app/test-ui/.webpack/main/index.js:2204:15)
    at ./node_modules/zeromq/lib/load-addon.js (/home/work/test-app/test-ui/.webpack/main/index.js:2211:15)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./node_modules/zeromq/lib/native.js (/home/work/test-app/test-ui/.webpack/main/index.js:2231:38)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./node_modules/zeromq/lib/index.js (/home/work/test-app/test-ui/.webpack/main/index.js:1550:16)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./src/core/LogWatcher.ts (/home/work/test-app/test-ui/.webpack/main/index.js:1140:26)
    at __webpack_require__ (/home/work/test-app/test-ui/.webpack/main/index.js:2286:42)
    at ./src/index.ts (/home/work/test-app/test-ui/.webpack/main/index.js:1318:22)

I've looked at #12616 but it doesn't have anything actionable

If the current behavior is a bug, please provide the steps to reproduce.

Please see zeromq/zeromq.js#676

1. npm init electron-app@latest test-ui -- --template=webpack-typescript
2. npm i preact --save-dev (https://preactjs.com/guide/v10/getting-started and followed Aliasing in Webpack
3. npm i zeromq --save-dev

Alternatively, do step (1) above and then unzip test-ui.zip into test-ui, and run npm install. Copy paste any zeromq test code into index.ts and watch it fail like above.

I then played around a simple zeromq.Subscriber socket and got it to work (in a single .ts file)
I then tried importing the working code into the main process (index.ts) and that's where the problem began:

What is the expected behavior?

I expected it to just work. (Seriously!)

Please see project configuration (tsconfig.ts, package.json and webpack.*.ts) in test-ui.zip

Other relevant information:
webpack version: webpack@5.96.1 | MIT | deps: 23 | versions: 839
Node.js version: node@18.20.5 | ISC | deps: 1 | versions: 730
Operating System: Opensuse 15.5
Additional tools:

[devzzzero]

Please help! I'm tearing my hair out here!

[devzzzero]

So it looks like the immediate culprit is that the polyfills for process is not providing arch and platform (and has bitrotted since 2016 or so). I am at a loss for how to solve this. Does any kind soul have any suggestions?

thank you.

[devzzzero]

issue: Richienb/node-polyfill-webpack-plugin#58

[devzzzero]

Please refer to niksy/node-stdlib-browser#33

Thank you.

[alexander-akait]

Sorry, we can't solve this here, close in favor - niksy/node-stdlib-browser#33

Feedback welcome

[devzzzero]

@alexander-akait If you can give me some hints on this, I'd be very grateful.

I'd like to have 'fs' and 'process' modules available on the renderer side (I understand it's been disabled for security reasons), but not being able to use something like zeromq/zeromq.js in the renderer side is all kinds of hasslesome (not to mention, IPC examples on electronjs.org/ipc do not work out of the box!)

Given that zeromq.js needs sockets (and has native bindings in c++) I can't make do with mocks. Therefore, I'd like to have some kind of a jailbreak re-import of 'fs', 'net', 'process', 'os' etc.. onto webpack, in the context of electron.

Do you have any pointers you can give me on how to go about this? (this is for a project that started with npm init electron-app@latest test-ui -- --template=webpack-typescript )

Here's an idea (probably wrong)

1. grab fs.js, process.js etc.. from electron
2. figure out how to inject them on webpack as a plugin??
3. Alternatively, is there a way to to tell webpack NOT to strip out fs, process, etc.. for the renderer side?

Thank you

[alexander-akait]

grab fs.js, process.js etc.. from electron

I would recommend asking this in their repository

figure out how to inject them on webpack as a plugin??

You can use aliases to implement your modules and logic - https://webpack.js.org/configuration/resolve/#resolvealias

Alternatively, is there a way to to tell webpack NOT to strip out fs, process, etc.. for the renderer side?

We don't do that, I think it is from - https://github.com/Richienb/node-polyfill-webpack-plugin

You can use excludeAliases - https://github.com/Richienb/node-polyfill-webpack-plugin?tab=readme-ov-file#excludealiases and write own fs/process/etc logic

[devzzzero]

Thank you very for your response @alexander-akait
I will try your suggestions.
I'll report back here as more stuff gels.

[devzzzero]

Hi, I am being hinted that this might be solvable with configuration changes for webpack.
In the repo, I have webpack.main.config.ts and webpack.renderer.config.ts

I set the following on the webpack.main.config.ts to get zeromq to load up properly on the main thread side.

  externals: {
    zeromq: 'zeromq',
    path: 'path',  // <- is this right?
    fs: 'fs',  // <- is this right?
    net: 'net', // <- is this right?
  },

How do I tell webpack to include fs, path, process, os node.js default packages for the renderer?
(just copying it over didn't work. )-:
Thank you @alexander-akait

[alexander-akait]

electron renderer target is web target you can't just take and use node modules there, you need polyfills or preload them - https://stackoverflow.com/questions/58150932/how-to-require-a-node-module-from-the-renderer-in-electron and https://stackoverflow.com/questions/76319506/how-to-add-const-fs-requirefs-to-electron-in-renderer-without-including-n

[devzzzero]

Hi. I"ve run into another problem.

I've resigned to use zeromq ONLY in the main process for electron. I.e. I've managed to hack up enough IPC workarounds so that the main <-> renderer ipc bridge is used to have the renderer side access to zeromq.
I've also had to list zeromq as an external in webpack.main.config.ts

  externals: {
    zeromq: 'zeromq',
    path: 'path',
    fs: 'fs',
    net: 'net',
  },

The app actually runs as expected when I do npm start
however, when I package it up using npm run publish, the resulting app dies like this

./my-test-app 
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'zeromq'
Require stack:
- /home/jason/work/test-app/test-ui/out/my-test-app-linux-x64/resources/app.asar/.webpack/main/index.js
- 
    at Module._resolveFilename (node:internal/modules/cjs/loader:1232:15)
    at s._resolveFilename (node:electron/js2c/browser_init:2:123740)
    at Module._load (node:internal/modules/cjs/loader:1058:27)
    at c._load (node:electron/js2c/node_init:2:16955)
    at Module.require (node:internal/modules/cjs/loader:1318:19)
    at require (node:internal/modules/helpers:179:18)
    at 1594 (/home/jason/work/test-app/test-ui/out/my-test-app-linux-x64/resources/app.asar/.webpack/main/index.js:2:209013)
    at n (/home/jason/work/test-app/test-ui/out/my-test-app-linux-x64/resources/app.asar/.webpack/main/index.js:2:319868)
    at 5516 (/home/jason/work/test-app/test-ui/out/my-test-app-linux-x64/resources/app.asar/.webpack/main/index.js:2:162245)
    at n (/home/jason/work/test-app/test-ui/out/my-test-app-linux-x64/resources/app.asar/.webpack/main/index.js:2:319868)

Can you help?
Thank you.