Unable to integrate with Electron (Vscode extension)

[kartik122]

I have been building a vscode extension, for that, i required sqlite to be run on the client side. (im kinda new to this vscode extension dev)
Altho i had tried a lot of other stuff including running the nodesqlite3 and better-sqlite3 (im running it in macOs)
I have been facing similar problems across both libraries.
Some of the persistant errors have been :

1. Could not locate bindings file error: This runs on startup of the extension development host for the sqlite3 instance. (this is the first error i get on clean install without a rebuild)
2. Node - was compiled against a different Node.js version using NODE_MODULE_VERSION 128 (The version against which the error i have been facing has been for 115, 127 and 132 all tried and rebuilt with different versions of node)

I am thinking of shifting towards sql.js(which also requires some amount of configuration) now as the last hope since this has taken me days of debugging.
Below are the similar error threads i have gone through to no avail :

1. better_sqlite3 was compiled against a different Node.js version #549
2. https://stackoverflow.com/questions/50997956/error-could-not-locate-the-bindings-file-better-sqlite3-node
3. https://stackoverflow.com/questions/68874530/i-have-a-better-sqlite3-node-error-when-i-require-quick-db
4. Error: Could not locate the bindings file. #146
5. https://stackoverflow.com/questions/50997956/error-could-not-locate-the-bindings-file-better-sqlite3-node

this is my package.json :

 "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "webpack",
    "watch": "npm-run-all --parallel watch:*",
    "watch:ext": "webpack --mode development --watch --config ./webpack/extension.config.js",
    "watch:wv": "webpack serve --mode development --config ./webpack/webview.config.js",
    "package": "npm run clean && npm-run-all --parallel package:*",
    "package:ext": "webpack --mode production --config ./webpack/extension.config.js",
    "package:wv": "webpack --mode production --config ./webpack/webview.config.js",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "clean": "rimraf dist",
    "test": "node ./out/test/runTest.js",
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
    "postinstall": "electron-builder install-app-deps",
    "rebuild": "./node_modules/.bin/electron-rebuild -f -w ./node_modules/better-sqlite3"
  },
  "devDependencies": {
    "@electron/rebuild": "^3.7.1",
    "@estruyf/vscode": "^1.1.0",
    "@types/better-sqlite3": "^7.6.12",
    "@types/glob": "^7.2.0",
    "@types/mocha": "^9.1.1",
    "@types/node": "20.x",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "@types/uuid": "^8.3.4",
    "@types/vscode": "^1.71.0",
    "@types/webpack": "^5.28.1",
    "@types/webpack-dev-server": "^4.7.2",
    "@typescript-eslint/eslint-plugin": "^5.31.0",
    "@typescript-eslint/parser": "^5.31.0",
    "@vscode/test-electron": "^2.1.5",
    "autoprefixer": "^10.4.20",
    "copy-webpack-plugin": "^12.0.2",
    "css-loader": "^6.7.1",
    "eslint": "^8.20.0",
    "glob": "^8.0.3",
    "mocha": "^10.0.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.47",
    "postcss-loader": "^7.3.4",
    "prettier": "^3.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rimraf": "^3.0.2",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.4.14",
    "ts-loader": "^9.4.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@ant-design/icons": "^5.5.2",
    "@types/jsonwebtoken": "^9.0.7",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@vscode-elements/react-elements": "^0.8.0",
    "@vscode/codicons": "^0.0.36",
    "antd": "^5.22.3",
    "axios": "^1.7.9",
    "better-sqlite3": "^11.8",
    "bindings": "^1.5.0",
    "dotenv": "^16.4.7",
    "electron": "^34.0.0",
    "electron-builder": "^25.1.8",
    "electron-rebuild": "^3.2.9",
    "highlight.js": "^11.11.0",
    "jsonwebtoken": "^9.0.2",
    "lucide-react": "^0.468.0",
    "mermaid": "^11.4.1",
    "node-gyp": "^11.0.0",
    "ollama": "^0.5.11",
    "prism-react-renderer": "^2.4.1",
    "react-markdown": "^9.0.1",
    "react-mermaid2": "^0.1.4",
    "react-syntax-highlighter": "^15.5.0",
    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.0",
    "sharp": "^0.33.5",
    "uuid": "^11.0.3",
    "zustand": "^5.0.2"
  }

this is my webpack config :

//@ts-check

"use strict";

const path = require("path");

//@ts-check
/** @typedef {import('webpack').Configuration} WebpackConfig **/

/** @type WebpackConfig */
const extensionConfig = {
  target: "node", // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
  mode: "none", // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

  entry: "./src/extension.ts", // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, "../dist"),
    filename: "extension.js",
    libraryTarget: "commonjs2",
  },
  externals: {
    vscode: "commonjs vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
    // modules added here also need to be added in the .vscodeignore file
    "better-sqlite3": "commonjs better-sqlite3",
  },
  resolve: {
    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
    ],
  },
  devtool: "nosources-source-map",
  infrastructureLogging: {
    level: "log", // enables logging required for problem matchers
  },
};
module.exports = [extensionConfig];

[neoxpert]

These are not "errors". Both libraries, nodesqlite3 and better-sqlite3, rely on a native module wrapping SQLite, being a C project itself. In order to use those libraries, the loaded module must be compatible with the runtime which is used to load them. When loading such modules the NODE_MODULE_VERSION is used to check compatibility.

Rebuilding the mentioned libraries for NodeJS won't solve the reported "errors" as VS Code requires a module, compiled against its respective Electron runtime API version. So, if you really want to use such native modules, it's up to you, to setup some build process that either compiles all the required combinations of OS and Electron versions or bundle existing prebuilt binaries.

As VS Code internally is using @vscode/sqlite3, I would rather try to use this module instead of trying to ship an extension with a custom made native module. Especially because updates of VS Codes Electron runtime will break your extension.

[kartik122]

Thanks @neoxpert
this explained a lot of things actually, which me and a few other devs at work(all relatively not that experienced) have been stuck on.
I saw one of the maintainer's of vscode (i think) suggest using sql.js so i figured if thats a good enough way