ElectronBuilder and SerialPort

Describe the bug

I can’t set data from a native module declared as external to a vue component property.

To Reproduce

I’m using a native module called serialport, for it to work it was necessary to declare as externals in the vue.config.js:

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['serialport']
        }
    }
};

I followed these steps according to the electron-builder guidelines and can be found at this link: https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/master/docs/guide/guide.md#native-modules-

SerialPort has a function to list the available serial ports and it returns a promise, I can print these ports on the console, but I can’t save them to a Vue component property, I believe it is because it is an external module compared to webpack.

Component code:

<template>
    <div>
        <div v-for="(port, index) in ports.length" :key="port + index">
            <div :id="'port' + index">Port: {‌{ port }}</div>
        </div>
    </div>
</template>

<script>
export default{
    name: 'SerialComm',
    data: () => ({
        ports: [],
    }),
    created() {
        SerialPort.list().then((ports) => {
            for (let i = 0; i < ports.length; i++) {
                console.log('Port', i, ports[i].comName)
                this.ports.push(ports[i].comName);
            }
            console.log('Promise this.ports', this.ports);
        });
        console.log('Created this.ports', this.ports);
    }
};
</script>

Console output:

Browser output:

Expected behavior

In the browser output, it printed “Port: 1” and “Port: 2”, where “Port:” is the text passed and the values “1” and “2” the value of the interpolated port property, it looks like it is printing the array index value + 1 instead of “COM4” and “COM19” as in console.

Environment (please complete the following information):

• OS and version: Windows 10
• node version: v10.16.2
• npm version: 6.9.0
• yarn version (if used): Not used
• vue-cli-plugin-electron-builder version : 1.4.0
• electron version: 5.0.10
• other vue plugins used: serialport (7.1.5)
• custom config for vcp-electron-builder: The standard was used
• (if possible) link to your repo: Project has no repository yet

Additional context

This same module has other methods, but you need to create an object and from there everything works perfectly, as in the code below:

const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');
const portName = 'COM4';
 
const port = new SerialPort(portName, { baudRate: 115200 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));
 
port.on('open', () => {
    console.log('Serial port open');
    const msg = 'First Message';
    port.write(msg, function(err) {
        if (err) console.log('Error on write: ', err.message);
        else console.log('Message written: ', msg);
    });
});
port.on('error', (err) => { console.log('Error: ', error.message); });
parser.on('data', (data) => { console.log('Serial:', data); });

Console output:

I have other components that have a promise, a non-standard vue module that are working, and the only difference between them is the declaration of externals in the vue.config.js file as stated earlier, it seems that this snippet of code is running outside the instance of Vue.

Does anyone know how I could solve this problem?

[focussing]

@ana-marcia it’s already a while ago, what I did was to install the Xcode command line tools (macOS). Hope that helps 😃

[nklayman]

I found your issue! You were using v-for="(port, index) in ports.length", which would iterate over the length of the array, instead of the array itself. Replace this with v-for="(port, index) in ports".

As a side note, your code snippet had one of the most insane issues I have ever encountered. For some reason, the first { in {{ port }} wasn’t actually a {. It was some kind of weird character that looked exactly like a { but would make it so that {{ port }} was displayed in the rendered app. Wow.