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

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

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

Add serialport@10.4.0.

yarn add serialport

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

import { SerialPort } from 'serialport';

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

Run in dev mode

yarn start

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

externals: "serialport",

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

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

@petertorelli

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

@A13k2

@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

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:

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

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.

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.

I am facing this issue uiohook-napi

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

Is there a way to get this to work with webpack and typescript? My config file complains when I use this.

@bearsworth

@bearsworth
Hi Mark,
Frameworks and packages move so quickly that if you just wait a year or two everything sorts itself out ... for a while. :)

I recently started from scratch with ALL new frameworks' latest versions. Despite the annoyance of having to load serialport from the main process of electron and export the functions to the renderer (which I think I may be doing horribly inefficiently), I've got everything working without any one-off modifications.

Here's a project I built a few months ago if you want to see a template:

https://github.com/petertorelli/serialportplus

I don't know how long this will last before the packages start to atrophy again, but fortunately my job no longer requires me to keep an eye on packages.

I should close this ticket since it is from almost three years ago and doubt anyone cares.

Good luck, friend!

Thanks so much for that. So the answer was -> just update everything :). I had this other issue that was related, but for me when I use electron forge it keeps doing the absolute path of the builder rather than the relative path. Have no idea what the answer to that is.

Navigation Menu

Repository navigation

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

Pre-flight checklist

Electron Forge version

Electron version

Operating system

Last known working Electron Forge version

Expected behavior

Actual behavior

Steps to reproduce

Additional information

Edit

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Pre-flight checklist

Electron Forge version

Electron version

Operating system

Last known working Electron Forge version

Expected behavior

Actual behavior

Steps to reproduce

Additional information

Activity

petertorelli commented on Oct 11, 2022

A13k2 commented on Oct 13, 2022

petertorelli commented on Oct 13, 2022

MarshallOfSound commented on Nov 9, 2022

petertorelli commented on Dec 24, 2022

kamilernerd commented on Jan 2, 2023

Edit

javierguzman commented on Jun 6, 2023

bearsworth commented on Nov 9, 2024

petertorelli commented on Nov 9, 2024

bearsworth commented on Nov 9, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions