Jesse Schneider

May 9, 2021

SerialPort with Electron running VueJS!

Recently while creating my first Electron application I found issues when integrating the SerialPort package. The application SerialPort is used in is an integration which communicates via a COM port.

The problem you will find is a "missing binding". This is caused by the package not being built with the proper Electron node version. The fix for this ended up being more complicated though as VueJS also presents a problem, you will see the same "missing binding" error even after rebuilding the package.

The solution for the second problem is to add SerialPort to the externals within your "vue.config.js" file. You must also set "allowRendererProcessReuse" to false inside your "background.js" file

## Steps to solve

1. Add electron-rebuild package to your project

   yarn add electron-rebuild

2. Add "electron-rebuild" to your install scripts in your package.json
   "install": "electron-rebuild",

3. Add SerialPort to your externals within vue.config.js

pluginOptions: {
   electronBuilder: { 
      externals: ['serialport'],       
    }    
}

4. Add allowRendererProcessReuse to false in your background.js file
   
   app.allowRendererProcessReuse = false;
  
5. Run yarn/npm install

   yarn install

Your application should now work with SerialPort, enjoy!