Missing Dependency: aws-sdk in ./node_modules/node-pre-gyp/lib/info.js

Question

I have a new Vue/Electron app just built using vue-cli-plugin-electron-builder and which will utilize sqlite.

The base install runs fine in development until I run yarn add sqlite3. I'm then presented with the aws-sdk missing dependency error.

Research suggests it's a webpack issue that can be fixed using webpack externals.

And, from the vue-electron-builder docs a similar explanation and fix.

I've updated my vue.config.js and webpack.config.js files based on this but am a few hours in now without resolution.

Any help or suggestions appreciated. Thanks.

[webpack node externals thread on github] (https://github.com/liady/webpack-node-externals) Reading on webpack with backend apps

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: [ 'sqlite3' ],
      },
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
      nodeModulesPath: ['../../node_modules', './node_modules']
    }
  }

//webpack.config.js

// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.
const nodeExternals = require('webpack-node-externals');

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}


module.exports = {
  service.resolveWebpackConfig(),
  externalsPresets: { node: true }, // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
}

//package.json

{
  "name": "spectral",
  "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",
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "sqlite3": "^5.0.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "webpack-node-externals": "^2.5.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

//sqlite connection setup

const path = require('path');
const sqlite3 = require('sqlite3').verbose()
const dbPath = path.resolve('src/db/spectral.db');
let db

export const conn = () => {
  if (!db || !db.open) {
    db = new sqlite3.Database(dbPath)
  }
  return db
}

Answer 1

More research led me to this thread which solved the 'sqlite3 not defined error' but created a new error 'require not found' which required adding nodeIntegration = true into vue.config.js.

// working solution vue.config.js

module.exports = {
   pluginOptions: {
       electronBuilder: {
           externals: ['sqlite3'],
           nodeIntegration: true
         },
       }
};

Additional references vue-electron-builder native modules