[Help] How to build node adodb library in production

[JarrodLodge]

Everything works in dev, only issue I have is that I get a blank screen and missing modules when installing and launching the built app.

I suspect i'm not understanding how to bundle an external node module correctly.

Package.json

{
  "name": "intransvoice-sync",
  "version": "2.1.0",
  "main": "dist-electron/main/index.js",
  "description": "Sync application for intransvoice application",
  "author": "Jarrod Lodge",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build --debug && electron-builder",
    "preview": "vite preview"
  },
  "engines": {
    "node": "^14.18.0 || >=16.0.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@types/cron": "^2.0.0",
    "@types/luxon": "^3.2.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.13",
    "electron": "^23.1.3",
    "electron-builder": "^23.6.0",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.4",
    "vite": "^4.0.4",
    "vite-plugin-electron": "^0.11.1",
    "vite-plugin-electron-renderer": "^0.12.1",
    "vue": "^3.2.45",
    "vue-tsc": "^1.0.24"
  },
  "debug": {
    "env": {
      "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344"
    }
  },
  "keywords": [
    "electron",
    "rollup",
    "vite",
    "vue3",
    "vue"
  ],
  "dependencies": {
    "@heroicons/vue": "^2.0.13",
    "cron": "^2.2.0",
    "electron-store": "^8.1.0",
    "node-adodb": "^5.0.3",
    "esbuild": "^0.15.13",
    "firebase": "^9.14.0",
    "luxon": "^3.2.1",
    "path-browserify": "^1.0.1",
    "pinia": "^2.0.24",
    "vue-router": "^4.1.6"
  }
}

vite.config.js

import { rmSync } from 'fs'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import renderer from 'vite-plugin-electron-renderer'
import pkg from './package.json'
import path from 'path'
import electron from 'vite-plugin-electron'
import { builtinModules } from 'module'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  rmSync('dist-electron', { recursive: true, force: true })

  const isServe = command === 'serve'
  const isBuild = command === 'build'
  const sourcemap = isServe || !!process.env.VSCODE_DEBUG

  return {
    plugins: [
      vue(),
      electron([
        {
          // Main-Process entry file of the Electron App.
          entry: 'electron/main/index.ts',
          onstart(options) {
            if (process.env.VSCODE_DEBUG) {
              console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')
            } else {
              options.startup()
            }
          },
          vite: {
            build: {
              sourcemap: sourcemap ? 'inline' : undefined, // #332
              minify: isBuild,
              outDir: 'dist-electron/main',
              rollupOptions: {
                external: [
                  // 'electron',
                  // ...builtinModules,
                  ...Object.keys('dependencies' in pkg ? pkg.dependencies : {})],
              },
            },
          },
        },
        {
          entry: 'electron/preload/index.ts',
          onstart(options) {
            // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete, 
            // instead of restarting the entire Electron App.
            options.reload()
          },
          vite: {
            build: {
              sourcemap: sourcemap ? 'inline' : undefined, // #332
              minify: isBuild,
              outDir: 'dist-electron/preload',
              rollupOptions: {
                external: [
                  // 'electron',
                  // ...builtinModules,
                  ...Object.keys('dependencies' in pkg ? pkg.dependencies : {})],
              },
            },
          },
        }
      ]),
      // Use Node.js API in the Renderer-process
      renderer({
        nodeIntegration: true,
        optimizeDeps: {
          include: ['electron-store', 'node-adodb'],
        },
      }),
    ],
    build: {
      minify: false,
    },
    resolve: {
      alias: {
        path: "path-browserify",
        '@': path.resolve(__dirname, './src'),
      },
    },
    server: process.env.VSCODE_DEBUG && (() => {
      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
      return {
        host: url.hostname,
        port: +url.port,
      }
    })(),
    clearScreen: false,
  }
})

Error i'm receiving in console
index-e99b4393.js:36550 Error: Cannot find module './adodb'
Require stack:
- C:\Users\GGPC\AppData\Local\Programs\intransvoice-sync\resources\app.asar\dist\sync-1107c9dd.js
- C:\Users\GGPC\AppData\Local\Programs\intransvoice-sync\resources\app.asar\dist\Status-8d08f2bd.js
- C:\Users\GGPC\AppData\Local\Programs\intransvoice-sync\resources\app.asar\dist\index.html
    at Module._resolveFilename (node:internal/modules/cjs/loader:1002:15)
    at o._resolveFilename (node:electron/js2c/renderer_init:2:3879)
    at Function.resolve (node:internal/modules/cjs/helpers:109:19)
    at Object.<anonymous> (C:\Users\GGPC\AppData\Local\Programs\intransvoice-sync\resources\app.asar\dist\sync-1107c9dd.js:151:25)
    at Object.<anonymous> (C:\Users\GGPC\AppData\Local\Programs\intransvoice-sync\resources\app.asar\dist\sync-1107c9dd.js:17487:3)
    at Module._compile (node:internal/modules/cjs/loader:1174:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1229:10)
    at Module.load (node:internal/modules/cjs/loader:1044:32)
    at Module._load (node:internal/modules/cjs/loader:885:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)

[caoxiemeihao]

Can you provide a minimal reproduction REPO?

[JarrodLodge]

https://github.com/JarrodLodge/electron-vite-node-adodb

[JarrodLodge]

@caoxiemeihao Any ideas? I think i'm just adding the node adodb library wrong in Prod.

[caoxiemeihao]

electron-builder.json5

{
    "extraResources": [
-   "electron-store/**/*",
-   "node_modules/.electron-store/**/*",
-   "node-adodb/**/*",
-   "node_modules/.node-adodb/**/*"
+   {
+     "from": "./node_modules/node-adodb/lib/adodb.js",
+     "to": "app/dist/adodb.js"
+   }
  ]
}

The usage has been written here 👉 https://www.npmjs.com/package/node-adodb#electron

[JarrodLodge]

Sorry i still don't know how you got adodb.js to be in the dist folder. Mine goes to the resources/app/dist.

And then secondly the documentation you linked to only shows how to use this library in the electron/main.ts not in the renderer. How do you import this extraResource in the renderer?

[JarrodLodge]

Just following up on this, if I unpack the app.asar file. adodb is still in node modules. Not where you show it to be.

[caoxiemeihao]

The case changes based your repo. But I set asar value to false in my local for test it.

[JarrodLodge]

"asar": false,

I had to set asar to false to get the same results as you.

[caoxiemeihao]

I fact, the lib node-adodb is non-standard. Maybe you can copy node_modules/node-adodb/lib/adodb.js into public dir by yourself and Vite will move it to dist automatically after build.