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

See original GitHub issue

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.

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:27 (4 by maintainers)

Top GitHub Comments

3reactions

chetboxcommented, May 10, 2022

@sh0shinsha yes, that’s the key for Electron React Boilerplate. 👍🏼 Thanks for helping me understand how that build system works.

With Electron Forge I can get a packaged (non-ASAR) build working by copying serialport and its dependencies into the packaged electron-forge folder.

yarn package
cp -r node_modules/serialport out/my-new-app-linux-x64/resources/app/node_modules/
cp -r node_modules/@serialport out/my-new-app-linux-x64/resources/app/node_modules/
cp -r node_modules/debug out/my-new-app-linux-x64/resources/app/node_modules/
cp -r node_modules/ms out/my-new-app-linux-x64/resources/app/node_modules/
cp -r node_modules/node-gyp-build out/my-new-app-linux-x64/resources/app/node_modules/
./out/my-new-app-linux-x64/my-new-app

I assume this means the Electron Forge + Webpack build system needs to be better aware of how to handle native modules like this. I think the issue is with @electron-forge/plugin-webpack or with @vercel/webpack-asset-relocator-loader (as I mentioned above) not with serialport.

3reactions

sh0shinshacommented, May 10, 2022

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

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
library: { type: 'commonjs2' } in webpack config’s output
(if you’ve already installed serialport, npm uninstall serialport in your root package.json)
cd ./release/app then npm install serialport

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!

Top Results From Across the Web

Webpack not including module with Electron Forge and ...

I stoped using webpack with electron-forge and created my own script for encrypting and copy important files to the final build, electron-forge ......

Webpack Plugin - Electron Forge

This plugin makes it easy to set up standard webpack tooling to compile both your main process code and your renderer process code,...

Quick Start | Electron

Please install Node.js using pre-built installers for your platform. ... Note: If you run the start script again at this point, your app...

electron-packager - npm

Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI. Latest version: 17.1.1, last published: 2 ...

How to build an Electron app using create-react-app ... - Medium

production won't use webpack-dev-server . It needs to use the static file from building the React project; (small) nuisance to run both npm...