zeromq + vite + electron + react === fail (MAIN PROCESS! NOT RENDERER!)

[devzzzero]

Describe the bug

Hi. I am trying to get an electron project up and running with zeromq, but having bizarre issues:
Please refer tohttps://github.com/zeromq/zeromq.js/issues/676
and webpack/webpack#18995 (reply in thread)
and zeromq/zeromq.js#690

Reproduction

https://github.com/devzzzero/vite-zeromq-bug

Steps to reproduce

see readme.md in the repo

• npm install
• npm run dev to see code fail

System Info

System:
    OS: Linux 5.14 openSUSE Leap 15.5
    CPU: (8) x64 Intel(R) Xeon(R) W-2225 CPU @ 4.10GHz
    Memory: 45.07 GB / 62.49 GB
    Container: Yes
    Shell: 5.6 - /bin/zsh
  Binaries:
    Node: 22.11.0 - /pkgs/volta/tools/image/node/22.11.0/bin/node
    Yarn: 4.5.2 - /pkgs/volta/tools/image/yarn/4.5.2/bin/yarn
    npm: 10.9.0 - /pkgs/volta/tools/image/npm/10.9.0/bin/npm
  Browsers:
    Brave Browser: 131.1.73.104
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.3.4 
    vite: ^5.1.6 => 5.4.11

Used Package Manager

npm

Logs

D5280:x86_64-Linux5:~/gui/vite-bug/ZMQTest>npm run dev

> [email protected] dev
> vite

Port 5173 is in use, trying another one...
vite v5.4.11 building for development...

watching for file changes...
vite v5.4.11 building for development...

watching for file changes...

  VITE v5.4.11  ready in 509 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

build started...
build started... (x2)
transforming (1) electron/preload.ts✓ 1 modules transformed.
transforming (1) electron/main.tsrendering chunks (1)...computing gzip size (0)...computing gzip size (1)...dist-electron/preload.mjs  0.67 kB │ gzip: 0.27 kB
built in 52ms.
✓ 21 modules transformed.
rendering chunks (1)...computing gzip size (0)...computing gzip size (1)...dist-electron/main.js  27.30 kB │ gzip: 6.15 kB
built in 219ms.
App threw an error during load
Error: Failed to load zeromq.js addon.node: ReferenceError: __dirname is not defined
ReferenceError: __dirname is not defined
    at findAddon (file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:45:71)
    at file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:72:15
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadApplicationPackage (file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:129:9)
    at async file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:241:9
    at findAddon (file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:65:11)
    at file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:72:15
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadApplicationPackage (file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:129:9)
    at async file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:241:9
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Failed to load zeromq.js addon.node: ReferenceError: __dirname is not defined
ReferenceError: __dirname is not defined
    at findAddon (file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:45:71)
    at file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:72:15
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadApplicationPackage (file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:129:9)
    at async file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:241:9
    at findAddon (file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:65:11)
    at file:///home/jason/gui/vite-bug/ZMQTest/dist-electron/main.js:72:15
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadApplicationPackage (file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:129:9)
    at async file:///home/jason/gui/vite-bug/ZMQTest/node_modules/electron/dist/resources/default_app.asar/main.js:241:9

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

I cannot tell if this is a Vite issue and it's probably better to ask to the plugin side https://github.com/electron-vite/vite-plugin-electron
(Technically this is about cjs dependency with __dirname globals on main process build, but I'm not sure how electron plugin is designed to handle this.)

That said, what I tried is to externalize zeromq as main process dependency and this seems to make the app to start up.

    electron({
      main: {
        // Shortcut of `build.lib.entry`.
        entry: 'electron/main.ts',
        vite: {
          build: {
            rollupOptions: {
              external: ['zeromq']  // 👈👈
            }
          }
        }
      },
      ...

[devzzzero]

Hi. So after some futzing around, I am getting the same error in vite as in webpack.
The external dependency gets the app to load, but the built app (i.e. the result of npm run build
dies with this error

A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'zeromq' imported from /tmp/.mount_YourApCCE6li/resources/app.asar/dist-electron/main.js
    at packageResolve (node:internal/modules/esm/resolve:861:9)
    at moduleResolve (node:internal/modules/esm/resolve:934:18)
    at defaultResolve (node:internal/modules/esm/resolve:1176:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)

Here is my vite.config.ts

import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import preact from '@preact/preset-vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    preact(),
    electron({
      main: {
        // Shortcut of `build.lib.entry`.
        entry: 'electron/main.ts',
        vite: {
          build: {
            rollupOptions: {
              external: ['zeromq',
                'electron-settings']  // 👈👈
            },
          },
        },
      },
      preload: {
        // Shortcut of `build.rollupOptions.input`.
        // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
        input: path.join(__dirname, 'electron/preload.ts'),
      },
      // Ployfill the Electron and Node.js API for Renderer process.
      // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
      // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
      renderer: process.env.NODE_ENV === 'test'
        // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
        ? undefined
        : {},
    }),
  ],
})

Help!

thank you.