process nodejs undefined into bindings.js with Electron project (and better-sqlite3) - node.js

Question

I created a Electron.js project like that :
install node 14
install vue-cli
create template project vue with : vue create myproject
install electron wrapper like this : vue add electron builder
install better-sqlite3 library
And when I run this command : npm run electron:serve
I have an error into inspect of browser electron like this :
Uncaught TypeError: Cannot read property 'modules' of undefined
at Object.eval (bindings.js?dfc1:29)
at eval (bindings.js:223)
at Object../node_modules/bindings/bindings.js (chunk-vendors.js:142)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (database.js?4c26:9)
at Object../node_modules/better-sqlite3/lib/database.js (chunk-vendors.js:59)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (index.js?f4f1:2)
and if I enter into bindings.js code I can find where is the error :
nodePreGyp:
'node-v' +
process.versions.modules** +
The loader of this file don't know process env variable of nodejs.
Why node js doesn't knowing it's process variable, it's strange ?
If Electron to do well to start browser, the issue is around the renderer process ?
But it seems to be better-sqlite3 module is concerned because error start with loading this library with webpack ?
there is my package.json file :
{
"name": "electron-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"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": {
"#types/better-sqlite3": "^5.4.1",
"better-sqlite3": "^7.1.1",
"core-js": "^3.6.5",
"node-sass": "4.14.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#types/chai": "^4.2.11",
"#types/electron-devtools-installer": "^2.2.0",
"#types/mocha": "^5.2.4",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-mocha": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "^1.0.3",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"electron": "^9.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"spectron": "11.0.0",
"typescript": "~3.9.3",
"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",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"mocha": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
If I comment code line with import better-sqlite3 I don't have the issue.
Can you tell me where is the problem or help me to more understand how fix this...
Thank you

Answer 1

This issue has an origin from webpack auto managed by vue cli.
If you want to use better-sqlite3 library (or for similar issue) with vue and loading your project with webpack WRAPPED by vue into vue-cli, you need to add this into the vue.config.js
configureWebpack: {
externals: {
'better-sqlite3': 'commonjs better-sqlite3'
},
},
WARNING : you can use vue-cli and webpack without this specific file into your project because vue-cli managed that for you. But if you want to more customize vue-cli you need to add manually this file (which merged with the base vue.config.js that hidden by vue-cli).