`No native build was found for platform` when using Electron Forge + Webpack

[chetbox]

SerialPort Version

10.4.0

Node Version

14.19.1

Electron Version

17.2.0

Platform

Linux [redacted] 5.13.0-37-generic #42~20.04.1-Ubuntu SMP Tue Mar 15 15:44:28 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

Architecture

x64

Hardware or chipset of serialport

No response

What steps will reproduce the bug?

I'm having trouble using the Electron Forge Typescript + Webpack template to replicate this example: https://github.com/serialport/electron-serialport

• yarn create electron-app my-new-app --template=typescript-webpack && cd my-new-app
• yarn add serialport tableify
• yarn add --dev @types/tableify
• Copy the contents of renderer.js into renderer.ts
• Copy the contents of index.html into index.html
• Add webPreferences: { nodeIntegration: true, contextIsolation: false } to the options of BrowserWindow in index.ts
• target: 'electron-renderer' to webpack.renderer.config.js
• npx electron-rebuild
• yarn start

What happens?

This error appears on the console and Serialport fails to start.

Uncaught Error: No native build was found for platform=linux arch=x64 runtime=electron abi=101 uv=1 libc=glibc node=16.13.0 electron=17.2.0 webpack=true
    loaded from: [redacted]/my-new-app/node_modules/electron/dist/resources/electron.asar

    at Function.load.path (index.js?04e8:6:99)
    at load (index.js?04e8:6:99)
    at eval (load-bindings.js?bdc2:10:1)
    at Object../node_modules/@serialport/bindings-cpp/dist/load-bindings.js (index.js:85:1)
    at __webpack_require__ (index.js:841:33)
    at fn (index.js:1028:21)
    at eval (darwin.js?fd34:8:25)
    at Object../node_modules/@serialport/bindings-cpp/dist/darwin.js (index.js:30:1)
    at __webpack_require__ (index.js:841:33)
    at fn (index.js:1028:21)

What should have happened?

Serialport should list all serial devices in the Electron window that opens exactly as with https://github.com/serialport/electron-serialport

Additional information

The same issue occurs when running a packaged Electron app using yarn make.

I have observed the same behaviour using Electron 12.0.9. (This is the project we are using Serialport in.)

A colleague has replicated the issue with Electron 12.0.9 on macOS with an M1 MacBook Pro.

[chetbox]

I think the issue boils down to compatiblity with https://github.com/vercel/webpack-asset-relocator-loader

It is looking for one of the following:

• require('bindings')(...)
• nbind.init(..)
• node-pre-gyp include patterns

I haven't been able to cooerce Electron to load the .node native libraries by copying them to .webpack/renderer/native_modules/prebuilds/linux-x64 sadly.

[PredictabilityIsGood]

@chetbox Did you ever get this working? The moment I added serialport to one of my electron projects, I encountered the same bindings issue. Before I go on a wild goose chase, I'd like to see if you were able to resolve this issue and provide some guidance

[chetbox]

Not yet. We'll have to look when we absolutely must upgrade which is not yet. Chase away. Please update us if you make any progress.

[mimamuh]

I got the same error adding serialport to an electron forge + webpack project.

[sh0shinsha]

hey @PredictabilityIsGood @mimamuh any updates? same experience as you guys using electron-builder

[reconbot]

You don't need to builder anymore (since v10) but you do need to tell webpack to ignore it https://webpack.js.org/configuration/externals/

[mimamuh]

@sh0shinsha I switched to electron-react-boilerplate which excludes the serialport libs from the bundler similar as @reconbot mentioned. So simply try to exclude serialport and I think it should work even with forge + webpack then.

[chetbox]

I've tried adding serialport and @serialport/bindings-cpp to webpack's externals but I still get this message in the renderer after running electron-forge make:

Uncaught Error: Cannot find module 'serialport'

[chetbox]

We're using the ASAR option to package a production app. On closer inspection it seems the ASAR has an empty node_modules folder. Is there anything I need to do to tell Electron Forge to include serialport in node_modules inside the ASAR?

Edit: Turning off the ASAR option still results in an empty node_modules folder when running electron-forge make.

[sh0shinsha]

Thanks for the replies everyone.

@chetbox same issue here, adding serialport to externals results in the same message: Cannot find module 'serialport'

@mimamuh I followed your guidance and did a fresh clone of electron-react-boilerplate 4.5.0 and added serialport: 10.4.0. After packaging I get the same error message as OP:

Have you managed to get serialport working with electron-react-boilerplate?

[mimamuh]

@sh0shinsha Yes, I got it managed to work with electron-react-boilerplate. Have you installed serialport like desribed here in the docs?. This might be your issue.

@chetbox Actually I had the same thought: In case you exclude serialport from webpacks' build process then you might have to include the excluded module yourself into electrons build process somehow in case electron (forge) doesn't do so automatically for you, which I doubt it does when I read the docs here. That might explain to me why it's not included in your ASAR folder?

At least electron-react-boilerplate handles it like that. I have to install these native modules into a separated node_modules folder so that it can be copied it into my app before it is packaged by electron. Check out these docs here, maybe it helps to understand the process.

[sh0shinsha]

@mimamuh you saved me mate! Following the steps in the docs you linked regarding how native modules are handled in electron-react-boilerplate set me on the right path.

I'll outline the steps I took to solve my No native build was found for platform error. I've modeled my project's webpack configs on the ones in electron-react-boilerplate, so these steps may be helpful for those using electron-react-boilerplate or those with a similar webpack setup:

1. externals: ['serialport'] in webpack config -> in my case I just added it right to webpack.config.main.prod since I'm not merging configs like in electron-react-boilerplate
2. library: { type: 'commonjs2' } in webpack config's output
3. (if you've already installed serialport, npm uninstall serialport in your root package.json)
4. cd ./release/app then npm install serialport

• (https://electron-react-boilerplate.js.org/docs/native-modules/#native-modules-in-electron-react-boilerplate)
• (https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/.erb/scripts/check-native-dep.js)

If you're using electron-react-boilerplate you should be all set, they handle module linking in the ./release/app/package.json: https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/release/app/package.json

In my case I set serialport: =10.4.0 in both the ./release/app/package.json and devDependencies in my root package.json since I'm using an npm workspace monorepo and not the exact folder structure of electron-react-boilerplate. If anyone has a better solution to this I would welcome it but won't pursue it further here since it is outside the scope of serialport.

Hope this helps, thanks everyone!

[chetbox]

@sh0shinsha Yes, I got it managed to work with electron-react-boilerplate. Have you installed serialport like desribed here in the docs?. This might be your issue.

@chetbox Actually I had the same thought: In case you exclude serialport from webpacks' build process then you might have to include the excluded module yourself into electrons build process somehow in case electron (forge) doesn't do so automatically for you, which I doubt it does when I read the docs here. That might explain to me why it's not included in your ASAR folder?

At least electron-react-boilerplate handles it like that. I have to install these native modules into a separated node_modules folder so that it can be copied it into my app before it is packaged by electron. Check out these docs here, maybe it helps to understand the process.

Those instructions for native modules with electron-react-boilerplate work in development using serialport but not when the app is packaged. I'm not sure why and I don't understand how to debug this tooling well enough. Here's a repo with the changes if anyone wants to investigate: https://github.com/chetbox/electron-react-boilerplate
(Note that I had to comment out the renderer IPC code because it caused a crash with contextIsolation: false.

[sh0shinsha]

@chetbox it looks like serialport isn't present in your ./release/app/package.json. Let me know if the steps I outlined help.