runningin Electron app throws bindings error

[navelpluisje]

When running an Electron app throws an eror while setting op the midi in and outputs. The error thrown is:

App threw an error during load
Error: Failed to find binding for midi
    at loadBinding (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:275:27)
    at ./node_modules/@julusian/midi/midi.js (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:24:135)
    at __webpack_require__ (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1480:42)
    at ./src/midiDevice.ts (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1300:32)
    at __webpack_require__ (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1480:42)
    at ./src/index.ts (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1241:38)
    at __webpack_require__ (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1480:42)
    at /Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1496:37
    at Object.<anonymous> (/Users/<name>/Projects/midi-host-app/.webpack/main/index.js:1499:12)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)

I have created a repo with a small test application: https://github.com/navelpluisje/midi-electron-test

Error can be reproduced by:

• clone the repo
• cd into the project
• run yarn install
• run yarn start

I'm on a macOS 12.6

Let me know if you're missing any info.

[Julusian]

Sorry, for some reason github didnt turn on notifications for this repository...

Yeah, I can see a couple of weird things going on here.

1) electron-rebuild is rebuilding this library. This probably isnt a problem, but it is unnecessary. I don't see an obvious way of telling electron-rebuild to skip rebuilding one library though.

2) @vercel/webpack-asset-relocator-loader doesn't support the native module loader being used.
The easy but suboptimal solution here is to add this to your webpack.main.config.ts:

  externals: {
    '@julusian/midi': 'commonjs2 @julusian/midi'
  }

The better solution would be to get webpack to copy node_modules/@julusian/midi/prebuilds to .webpack/main. Ideally stripping this down to just the files needed for your current platform, but that is not necessary. I'm sure there is a webpack plugin you can use to automate this

[navelpluisje]

Thanx for the info. Added copy-webpack-plugin for copying the prebuilds. Build went fine now and am able to run the app now. For those who also want to use this with Electron, there may occur an v8_ArrayBuffer_NewBackingStore error. It is related to this bug report: https://github.com/node-ffi-napi/node-ffi-napi/issues/225.

The suggested solution to use version 20 works well.

[Julusian]

The v8_ArrayBuffer_NewBackingStore should be fixed now in v3.0.0

[Julusian]

Could you share your config for copy-webpack-plugin, so that I can add it to the readme?

[navelpluisje]

I can confirm v3.0.0 is working properly with Electron v22.0.0. Good job and thanx for that. My plugin setting for webpack copy is:

  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./node_modules/@julusian/midi/prebuilds", to: "./prebuilds" },
      ],
    }),
  ]

This is when managing Electron with Electron-Forge. Electron-Forge is setting the actual paths. I created a repo with a starter project. Did also some restructuring in the src folder to make it more clear and less cluttered and added preload to be able to see the midi messages in the renderer.

Repo can be found here: https://github.com/navelpluisje/electron-midi-starter