Simple example showing problems with a native module in main entry (dev & packaged)

[petertorelli]

Pre-flight checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project uses.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.0.0-beta.67

Electron version

21.1.0

Operating system

MacOS 12.6

Last known working Electron Forge version

first time using

Expected behavior

I expect serialport to work seamlessly in dev and package mode, according to the documentation that claims it should work "out of the box" as described in this doc link:

https://www.electronforge.io/config/plugins/webpack#native-modules

Actual behavior

In dev mode, we get a popup with the classic Uncaught exception: Error: no native build was found... error. This can easily be fixed by adding externals: 'serialport' to the webpack.main.config.js file. But then...

When we try to package, it succeeds in building. However, after launching the app we get the other error: Uncaught exception: Error: Cannot find module 'serialport'... because it hasn't been copied to the package area.

There are some StackExchange code snippets to set up hooks that scan the config file and copy modules, but those did work. They also do not work with other entrypoints that are forked with child_process which need to use serialport too.

But I'm only filing this issue because 'out-of-the-box' is not described in the docs as far as I can tell (I hope I didn't miss a key footnote).

Steps to reproduce

1. create the demo boilerplate app with --template=typescript-webpack

yarn create electron-app my-new-app --template=typescript-webpack

2. Add serialport@10.4.0.

yarn add serialport

3. Open src/main.js and add these lines to the very bottom:

import { SerialPort } from 'serialport';

SerialPort.list().then(port => {
  console.log(port);
});

4. Run in dev mode

yarn start

5. This will fail because we need to add the line to webpack.main.config.js:

externals: "serialport",

6. This solves the developer issue, but the package fails to run (cannot find module exception) because it hasn't been copied during packaging. I tried some stack overflow hooks but they didn't work.

Additional information

I tried this hack but it didn't work:

https://stackoverflow.com/questions/71930401/webpack-not-including-module-with-electron-forge-and-serialport

[petertorelli]

Similar to this issue, but easier to reproduce IMHO :) ... #2788

[A13k2]

Hey @petertorelli been working on this since two days in a very similar case with serialport integration and webpack.
And I finally found a running solution: https://www.npmjs.com/package/@timfish/forge-externals-plugin

With this plugin, serialport package will be included in the build. Only got int running in main process though. But that's ok, since now i got a good reason to look into ipc context bridge.

in package.json:

"plugins": [
// webpack stuff
[
          "@timfish/forge-externals-plugin",
          {
            "externals": [
              "serialport"
            ],
            "includeDeps": true
          }
        ]
]

and in webpack,main.config.js:

externals: {
    serialport: 'serialport'
  }

Hope this helps :)

[petertorelli]

@A13k2,
THanks, this seems to fix the case when the code is in the main process, but not the renderer process.

E.g., try putting externals... into webpack.renderer.config.js and then putting the the serial port code in this issue at the bottom of renderer.ts. You'll need to also enable nodeIntegration: true in the forge config in package.json, as well as nodeIntegration: true and contextIsolation: false in the BrowserWindow instantiation in index.ts.

This results in serialport not found when you yarn start. Odd that it only works for main?

Second, this plugin also does not work if there is another entry point that uses serialport. For example. I have some code with multiple entry points in webpack.main.config.js. These JS files are launched via child_process and also use serialport. The main entry point works, but the spawned processes fail to find a native module.

Thanks,
Peter

[MarshallOfSound]

This is an issue with the webpack asset relocator we use. Specifically the fix in cases like this is to either fix the module, or the asset relocator, or both. In this case it required changes in both:

• feat: build and ship ESM js files too serialport/bindings-cpp#88
• fix: resolve paths used in the node-gyp-build fn vercel/webpack-asset-relocator-loader#168

If both those PRs land and get shipped, the serialport module will work out of the box.

[petertorelli]

I moved to 6.0.4 to test again but that isn't packaging correctly, so not sure which ticket I should work on. :O .... see #3120.

[kamilernerd]

Any updates on this? I have the same issue with node-hid package. It used to work before I upgraded to 6.0.4. I have also tested with @timfish/forge-externals-plugin and it didn't work. So far I have only experienced this on windows, mac seems to work just fine.

Edit

Just tested with @marshallofsound/webpack-asset-relocator-loader package on 6.0.4 and it seems to be working. I'm using the typescript + webpack template.

@vercel/webpack-asset-relocator-loader is used in webpack.rules.ts as default.

This might be a workaround for someone until this is fixed.