SerialPort with Electron running VueJS!

Posted on Aug 21, 2020
tl;dr: Run the commands found at the end of the post to integrate 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 soution 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 “elecron-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!