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

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

1. Add serialport@10.4.0.

yarn add serialport

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

import { SerialPort } from 'serialport';

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

1. Run in dev mode

yarn start

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

externals: "serialport",

1. 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

[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 😃

[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:

• https://github.com/serialport/bindings-cpp/pull/88
• https://github.com/vercel/webpack-asset-relocator-loader/pull/168

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