Can't use the `serialport` module (building for electron)

[r03ert0]

Hello,
I’m trying to use the serialport module from npm, but it doesn’t work.
The error can be reproduced by creating a blank quasar project, npm install serialport, and adding this to Index.vue:

import * as serialport from 'serialport'
console.log('serialport:', serialport)

I get the following error:

[HMR] Waiting for update signal from WDS...
webpack-internal:///./.quasar/client-entry.js:46 [Quasar] Running ELECTRON.
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] Failed to resolve async component default: TypeError: Cannot read property 'indexOf' of undefined
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] uncaught error during route navigation:
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1925 TypeError: Cannot read property 'indexOf' of undefined
    at Function.getFileName (webpack-internal:///./node_modules/bindings/bindings.js:178)
    at bindings (webpack-internal:///./node_modules/bindings/bindings.js:82)
    at eval (webpack-internal:///./node_modules/@serialport/bindings/lib/darwin.js:1)
    at Object../node_modules/@serialport/bindings/lib/darwin.js (:8080/0.js:21)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/@serialport/bindings/lib/index.js:10)
    at Object../node_modules/@serialport/bindings/lib/index.js (:8080/0.js:32)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)

Any idea?
thank you!
roberto

[patryckx]

@r03ert0 I found a base project using this npm package. You can see the implementation here:
https://github.com/tareq89/vue-electron-serialport/blob/master/src/renderer/api/index.js

[r03ert0]

thank you @patryckx !
i can’t see what it’s being done differently in that project… for me, just the fact of importing serialport triggers the error!

[nothingismagick]

Yeah, I used serialport a LONG time ago - on Linux - and had huge problems figuring out which usb to use. I don’t remember exactly what the solution was, but my hunch is that it has to do with your OS

[r03ert0]

argh… I’m on a Mac.
I did manage to use serialport in a node-only command, but i’m a bit lost among all the layers that quasar adds.
I found someone posting a similar issue, which was related to webpack, but i don’t know what to do with that information: https://github.com/serialport/node-serialport/issues/1789

[nothingismagick]

Generally when I am faced with this kind issue I start at the bottom and work my way up - this means specifically making sure that node-serialport is REALLY working.

Nevertheless, from that issue there one takeaways that MIGHT help you:

• use node-serialport v6.2.2

[r03ert0]

it didn’t…

but I found this in serialport’s installation guide (https://serialport.io/docs/guide-installation):

Electron
Electron is a framework for creating cross-platform desktop applications. It comes with its own version of the Node.js runtime.
If you require serialport as a dependency for an Electron project, you must compile it for the version of Electron your project's using.
When you first install serialport it will compile against the version of Node.js on your machine, not against the Node.js runtime bundled with Electron.
To recompile serialport (or any native Node.js module) for Electron, you can use electron-rebuild; more info at Electron's README.

npm install --save-dev electron-rebuild
Add electron-rebuild to your project's package.json's install hook
Run npm install

For an example project, check out electron-serialport.

but that didn’t help either… How can I check which version of Node is electron using?

[XeBiT]

In vue.config.js add to pluginOptions: electronBuilder: { externals: ['serialport'] }

module.exports = {
  pluginOptions: {
    quasar: {
      treeShake: true
    },
    electronBuilder: {
      externals: ['serialport']
    }
  },
  transpileDependencies: [
    /[\\\/]node_modules[\\\/]quasar[\\\/]/
  ]
}

Enjoy!

[mattmdedek]

This SO solution worked for me:

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