[SOLVED] Unable to use keytar in main.js of electron project

Unable to use keytar in main.js of electron project

I keep getting this error:

 error  in ./node_modules/keytar/build/Release/keytar.node

Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 @ ./node_modules/keytar/lib/keytar.js 1:13-52
 @ ./src/background.js
 @ multi ./src/background.js

I have background.js set as the main electron file in package.json because I'm using vue/vuetify with it which uses a main.js file as well.

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",    // <------------------ see right here
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.4.3",
    "jwt-decode": "^2.2.0",
    "keytar": "^5.0.0",
    "request": "^2.88.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "electron": "^7.1.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-loader": "^0.6.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-electron-builder": "^1.4.3",
    "vue-cli-plugin-vuetify": "^2.0.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Searching, it seems this happens when keytar is used in a renderer process. But background.js isn't a renderer process. Or am I missing something? I am completely new to electron.

Solution

I needed to mark keytar as external (as mentioned at https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#native-modules)

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ['keytar']
    }
  }
}

Once I did that it worked properly.