how to use serialport in quasar electron?

[s-light]

hello community,

today i tried to revisit my serialport in quasar example...

to just get an fresh start i tried with:

• just start with a fresh quasar project
• yarn add electron-rebuild
• yarn add serialport
• yarn electron-rebuild -f
• copied over my Serial.vue file
• adapted router and layout for new file
• quasar dev --mode electron
• navigat to Serial Test
• got a TypeError: SerialPort.list is not a function
• if i just remember what i had done else to get it working back then.... 🙈
• searched a bit and followed the trace to this SO question Quasar Framework, Electron, and Serialport: indexOf Error -
  i tried to replicate this - but nothing changed..
  maybe i just had no luck this day?!

if i try to import or require the serialport in the vue file i get a bunch of import related errrors during the build -

App •  WAIT  • Compiling of "Renderer" in progress...
 App •  DONE  • "Renderer" compiled with errors • 415ms
 App •  ERROR  •  Renderer  in ./node_modules/@serialport/bindings/lib/darwin.js
Module not found: Can't resolve imported dependency "util"
Did you forget to install it? You can run: yarn add util
.....

(thsi list goes on and on and on)
seems then i try to import it in a way / context it is not meant...

• (other) things / snippets of information i found but did not manage to get combined in the correct way
  • Electron Preload Script
  • node-serialport pull request about context awareness
  • serialport install guide for electron
  • quasar doc: configuring-electron

my experiments can be found in the fresh_start branch

has anyone an up to date step by step how to for this kind of external module?
or any tips on how to trace this down?!
i am currently lost how to go on with this... so any tips or broad hints are very welcome :-)

sunny greetings
stefan

[hawkeye64]

Please provide output of quasar info

[s-light]

quasar_serialport_test (fresh_start)$ quasar info

Operating System - Linux(5.4.0-91-generic) - linux/x64
NodeJs - 15.14.0

Global packages
  NPM - 7.21.0
  yarn - 1.22.5
  @quasar/cli - 1.2.2
  @quasar/icongenie - 2.3.3
  cordova - Not installed

Important local packages
  quasar - 2.3.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.2.3 -- Quasar Framework local CLI
  @quasar/extras - 1.12.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.22 -- The progressive JavaScript framework for buiding modern web UI.
  vue-router - 4.0.12
  vuex - Not installed
  electron - 16.0.1 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.16.0 -- Babel compiler core.
  webpack - 5.64.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.4.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.4.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - stefan-Zen
  enx00a0c6000000 - 192.168.1.4

[aquiot-inc]

I used Quasar/Electron using quasar build -m electron --debug

I can make it work in debug mode using quasar dev -m electron after modifying electron-main.js

app.allowRendererProcessReuse = false

(per https://stackoverflow.com/questions/62360403/quasar-framework-electron-and-serialport-indexof-error)

But when building I get:

Error: The module '\\?\C:\Users\dev\AppData\Local\Temp\75351054-13cb-4a28-91e5-aae18f237dc1.tmp.node' 
was compiled against a different Node.js version using 
NODE_MODULE_VERSION 83. This version of Node.js requires 
NODE_MODULE_VERSION 89. Please try re-compiling or re-installing the module 
(for instance, using `npm rebuild` or `npm install`).

And, yes: I installed electron-rebuild

I tried changing versions per:
https://stackoverflow.com/questions/63794519/serialport-for-electron-node-module-version-error-and-rebuild-does-not-fix
I Tried different versions of Quasar/Node but never able to find the right combo.

I also posted this issue to s-light/quasar_serialport_test#22 2 months ago.

and this:
https://discord.com/channels/415874313728688138/895356046393086002/895356047441657906

It seem others have struggled with this without a clear solution:
https://discord.com/channels/415874313728688138/596276102570311681/846841478143148041

I'm not very experienced with Electron so I haven't tried unbundled version vs bundled. With the example by @s-light broken (and remaining broken), I'm not going to be able to do any better myself without descending into a rabbit hole I really don't have time to go down. I'm getting PTSD just thinking about it! :-)

When @s-light example (or similar) is working again (and stable), I'll consider going back to the Quasar/Electron solution. I have an API wrapper that should make it not to painful.

[hawkeye64]

Delete this file: \?\C:\Users\dev\AppData\Local\Temp\75351054-13cb-4a28-91e5-aae18f237dc1.tmp.node
also remove node_modules and your lock file (yarn.lock or package-lock.json) and rebuild.

[aquiot-inc]

Previously tried this, and building from a clean computer. Same.

Let's see if @s-light can get it to work. Then there is hope!

[aquiot-inc]

Note that @s-light has closed the issue relating to the example, without a solution :-(
s-light/quasar_serialport_test#22 (comment)

The way I'm currently supporting serial ports is to use the Web Serial API now supported by Chrome/Edge. However, this will only work for web apps and cannot be used for building Quasar Windows/Linux/Mac executables because the bundled browser doesn't support the Web Serial API.

An incremental improvement would be to have the embedded browser used in Quasar support the Web Serial API (and Web USB etc.).

Ultimately, to support "Multi-platform Desktop Apps", Quasar apps need to provide a way to talk to hardware like a serial ports, USB etc. IMO.

[s-light]

yeah sorry..
i tried to cleanup my old repositories...

and in the last try i did not get anything to work..