indexOf Error with Quasar, Electron, and Serialport

[fdeitelhoff]

Summary of Problem

• What are you trying to do?

I'm setting up a test project with Quasar, Electron, and serialport.

• What happens?

The installation of every dependency works just fine. I call electron-rebuild and the message says everything works. But the build folder under "@serialport" does not get an update (or is even created, if I remove it first). This could be the problem, but when I start the Electron app, I see this in the console:

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/win32.js:1)
    at Object../node_modules/@serialport/bindings/lib/win32.js (vendor.js:340)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/@serialport/bindings/lib/index.js:6)
    at Object../node_modules/@serialport/bindings/lib/index.js (vendor.js:252)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)

• What should have happened?

At least the error should disappear means the Electron app should start without the error.

Code to Reproduce the Issue

This is the Index.vue of the Vue.js Electron app that's get created with the Quasar CLI:

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import SerialPort from 'serialport';

@Component
export default class Index extends Vue {
  test() {
    console.log('test', SerialPort);
  }
}
</script>

The import statement is enough to provoke the error.

I tried everything I could find here, in the Quasar forum, etc. pp.: electron-rebuild, trying to config serialport as an external dependency, ...

I'm not quite sure if the rebuild process is working as expected, but I don't know what to check to make sure it does. The electron example project with serialport is working for me. Maybe it is a Quasar related thing?

Versions, Operating System and Hardware

• SerialPort@? ^9.0.0
• Node.js v? v14.3.0
• Windows? Linux? Mac? Windows
• Hardware and chipset? (Prolific/FTDI/Other) --

[JarrodLodge]

Having the same issue. I believe its to do with there being no build for my setup using electron-rebuild.
prebuild-install http 404 https://github.com/serialport/node-serialport/releases/download/@serialport/[email protected]/bindings-v9.0.0-electron-v80-darwin-x64.tar.gz
MACOS
Serialport 9

[JarrodLodge]

@fdeitelhoff Try adding the following to your vue.config.js
pluginOptions: { electronBuilder: { externals: ['serialport'] } }
That so far has allowed serial port to build
ElectronBuilder

[fdeitelhoff]

@fdeitelhoff Try adding the following to your vue.config.js
pluginOptions: { electronBuilder: { externals: ['serialport'] } }
That so far has allowed serial port to build
ElectronBuilder

I've read this suggestion very often. I'm using the Quasar CLI, and there is no vue.config.js. I'm not quite sure if I can just create one or where I have to include this file. Any hints on this?

[JarrodLodge]

@fdeitelhoff I haven't used Quasar before, but I assume there is somewhere to edit webpack in Quasar. Quickly looking at the framework this might help.
https://quasar.dev/quasar-cli/handling-webpack

[ronger-x]

@fdeitelhoff
Hope this helps you,I modified:

• vue.config.js

module.export = {
    pluginOptions: {
        electronBuilder: {
            externals: ['serialport'],
            nodeModulesPath: ['../../node_modules', './node_modules']
        }
    }
}

• main.js or background.js

// set nodeIntegration: true
function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
      nodeIntegration: true
    }
  })
...
}

reference: vue-cli-plugin-electron-builder-guide

[fdeitelhoff]

@fdeitelhoff
Hope this helps you,I modified:

• vue.config.js

Thanks for your answer. I have no vue.config.js with Quasar CLI. Do I need to create it? Or is this all just working with vue-cli-plugin?

[ronger-x]

vue.config.js is not necessary,You can refer to my project nebula-helper, I use node-serialport with electron remote and global

// electron main.js
const serialPort = require('serialport');
global.SerialPort = serialPort;

......

new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            // Use pluginOptions.nodeIntegration, leave this alone
            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
            // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
            nodeIntegration: true
        }
})

// index.html
<head>
  <script>
    window.electron = require('electron');
  </script>
</head>

// Vue index.vue
        mounted() {
                let remote = window.electron.remote;
                const SerialPort = remote.getGlobal('SerialPort');
                Vue.SerialPort = Vue.prototype.$SerialPort = SerialPort;
        }

SerialPort v9.0.0 with electron-9.0.0 is not run, I use electron-8.4.0

"scripts": {
    "install": "npm rebuild --runtime=electron --target=8.4.0 --disturl=https://atom.io/download/atom-shell --abi=76",
    }

[mattmdedek]

The solution in this SO post worked for me

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

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week no further activity occurs. Feel free continue the discussion or ask for a never-stale label to keep it open. If this is a support issue, consider sharing it on stack overflow to get more eyes on your problem.

[Cam000]

To solve this for me I had to do the following (I am using the react-electron boilerplate):

Add the following to webpack.config.base.js:

externals: { 'serialport' }

Add the following to index.html

<script>
  const serialport = require('serialport');
</script>

Use serialport in js/tsx as you would do normally:

const serialport = require('serialport');
const serialList = serialport.list();