How to use the library serialport in cordova-electron ? (bug on launch .exe)

[laux98]

Hello everyone.

Since two days, I faced an issue and I don't understand what is it.
My goal is to use the library serialport.io in a cordova-app.

So the issue is really easy to reproduce :

Create a projet with cordova-electron

npm i -g cordova
cordova create sampleApp
cd sampleApp
cordova platform add electron

Add serialport

npm i serialport

Update sampleApp/platforms/electron/platform_www

#Add this in top of file
const { SerialPort } = require("serialport");
#And after all the const declarations, add this
console.log("hello serialport : " , SerialPort);

Try it with

cordova run electron --nobuild

That work and the console.log is make.

Build the project with

cordova build electron

There are no errors

But when you try to open the executable (for exemple in window, it is
in /sampleApp/platforms/electron/build/win-unpacked/HelloCordova.exe, this error message is displayed

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'serialport'
Require stack:
- /pathToMyProject/cordova/platforms/electron/build/linux-unpacked/resources/app.asar/cdv-electron-main.js
- 
    at Module._resolveFilename (internal/modules/cjs/loader.js:892:15)
    at Function.n._resolveFilename (electron/js2c/browser_init.js:245:1128)
    at Module._load (internal/modules/cjs/loader.js:737:27)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/pathToMyProject/cordova/platforms/electron/build/linux-unpacked/resources/app.asar/cdv-electron-main.js:27:24)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)

I use serialport : 12.0.0 ,Ubuntu : 22.04 ,cordova-electron : 3.1.0 ,cordova : 12.0.0 and react:18.2.0.

Did everyone has faced the same issue here ?

Documentation cordova-electron

Documentation SerialPort.io

[breautek]

I'm really not that familiar with Electron or Cordova Electron for that matter, so I'm not very confident in this answer, but for the sake of maybe pointing you in the right path... I believe the root (project-level) package.json / node_modules are for the project and is not brought into electron.

Electron platform (likely inside platforms/electron) has it's own package.json and node_modules. Generally speaking, runtime dependencies would be managed by a cordova plugin, which also provides an interface into the node module through Context Isolation. You can see an example in the device plugin that both imports a Node module and provides an API callable by the "browser" process.

[laux98]

Thank you for your answer. I am gonna test this evening by including the package serialport directly in the json of cordova application?

[laux98]

So, after some tests, the problem still persist.
So I decided to pass on electron and to stop using cordova-electron, and this works.

I'm closing this discussion because I won't use anymore cordova-electron for this project.
Thanks breautek for your help !

[erisu]

For additional information to anyone trying to use npm packages with thier Cordova-Electron app, a Cordova Plugin needs to be created.

For example:

We can look at the Cordova Device Plugin that added support for Electron and uses an npm package. In the case of the device plugin, you will see it including the npm package systeminformation and how it is used.

Device plugin PR for reference: apache/cordova-plugin-device#135

Note: The exported code in index.js is what the front-end code calls. The front-end would not require or use the package directly.

The device plugin is not an advance plugin, but I hope this information gives a good a starting point.