search

SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
https://simulatedgreg.gitbooks.io/electron-vue/content/
MIT License
15.47k stars 1.54k forks source link

Using sqlite3 with knex #976

Open vkiranmaniya opened 4 years ago

vkiranmaniya commented 4 years ago

Binding the Knex as Global Object of Vue.

The workaround i did.

I just installed sqlite3, knex andelectron-rebuild (to rebuild the native sqlite3 dependancy). Then i attached the knex object in src/renderer/main.js as given below.

const remote = require('electron').remote;
const dbPath = remote.getGlobal('dbPath');

let knex = require("knex")({
    client: 'sqlite3',
    connection: {
        filename: dbPath
    },
    useNullAsDefault: true
});

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.knex = Vue.prototype.$knex = knex
Vue.config.productionTip = false

Now, I'm able to use the knex object from any Vue component as this.$knex. It works fine when i run the app with npm run dev. But i got an issue when i tried to build the application using the default configurations.

Screenshots

image

Stacktrace
Error: Unresolved node modules: mssql, mysql, mysql2, pg
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:112:21
From previous event:
    at Collector.resolveUnresolvedHoisted (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:88:81)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:83:18
    at Generator.next (<anonymous>)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
From previous event:
    at Collector.collect (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:76:28)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:47:44
    at Generator.next (<anonymous>)
    at _getProductionDependencies (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/packageDependencies.js:92:37)
    at getProductionDependencies (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/packageDependencies.js:83:37)
    at Lazy.<anonymous> (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:138:24)
    at Generator.next (<anonymous>)
    at Lazy.get value [as value] (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/lazy-val/src/main.ts:18:25)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/yarn.js:166:90
From previous event:
    at _getProductionDependencies (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/packageDependencies.js:92:37)
    at getProductionDependencies (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/packageDependencies.js:83:37)
    at Lazy.<anonymous> (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:138:24)
    at Generator.next (<anonymous>)
From previous event:
    at Lazy.get value [as value] (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/lazy-val/src/main.ts:18:25)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/yarn.js:166:90
    at Generator.next (<anonymous>)
From previous event:
    at _rebuild (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/yarn.ts:179:5)
    at rebuild (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/yarn.js:163:19)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/yarn.ts:20:11
    at Generator.next (<anonymous>)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
From previous event:
    at _installOrRebuild (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/yarn.js:71:28)
    at installOrRebuild (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/out/util/yarn.js:55:28)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:509:13
    at Generator.next (<anonymous>)
From previous event:
    at Packager.installAppDependencies (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:470:70)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:420:20
    at Generator.next (<anonymous>)
From previous event:
    at Packager.doBuild (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:396:24)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:366:57
    at Generator.next (<anonymous>)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/graceful-fs/graceful-fs.js:136:16
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/graceful-fs/graceful-fs.js:57:14
    at FSReqWrap.args [as oncomplete] (fs.js:140:20)
From previous event:
    at Packager._build (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:335:133)
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:331:23
    at Generator.next (<anonymous>)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
From previous event:
    at Packager.build (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/packager.ts:288:14)
    at build (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/index.ts:59:28)
    at build (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/electron-builder/src/builder.ts:228:10)
    at then (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/electron-builder/src/cli/cli.ts:49:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! accurate@1.0.0 build: `node .electron-vue/build.js && electron-builder`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the accurate@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vkiranmaniya/.npm/_logs/2020-01-27T12_43_56_494Z-debug.log
Kirans-MacBook-Air:accurate vkiranmaniya$
Development Environment
vkiranmaniya commented 4 years ago

Any Updates please!

zaherg commented 4 years ago

Have you tried to install all the knexjs modules too

vkiranmaniya commented 4 years ago

Yes, I did. When it's working fine. But as per i know, I won't be able to use SQLite with electron-vue as the WebPack does not support native libraries. Is there any workaround to use sqlite3 with electron-vue?

zaherg commented 4 years ago

From the docs webpack support native modules, I didn't try it personally, but I see people using it without any problems.

Have you tried to update the packages to the latest version?

vkiranmaniya commented 4 years ago

Yes, I did. Can you provide setup steps? I need an electron-vue, sqlite3 with knex. the knex is gonna be used from component methods. So i want to attach the knex object to the vue global as shown in issue.

I did it successfully, but app can't find sqlite3 after production build. However, It runs perfectly in dev environment.

zaherg commented 4 years ago

Ok, so now the issue is in production.

can you try this comment https://github.com/SimulatedGREG/electron-vue/issues/49#issuecomment-316266553

vkiranmaniya commented 4 years ago

once again it's ending up with module resolution error

Error: Unresolved node modules: mssql, mysql, mysql2, pg
    at /Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:112:21
From previous event:
    at Collector.resolveUnresolvedHoisted (/Users/vkiranmaniya/Projects/Electron/Vue/accurate/node_modules/app-builder-lib/src/util/packageDependencies.ts:88:81)

After using the mentioned workaround.

vishalvaghasiya commented 4 years ago

Facing the same issue, I tried the initial workaround given by @vkiranmaniya but the app only works in the dev environment. electron-builder fails to build due to module resolution error. I tried to find out the way but according to other resources, webpack doesn't support native APIs. sqlite3 uses native binary. is it the reason of failing build?

nakorndev commented 4 years ago

Same issue here, for now I fix by install the rest of unresolved module by npm i -D mssql mysql mysql2 pg. Then it will be able to build.

ajoslin103 commented 3 years ago

cannot find where I found this -- but you ignore the dialects you don't want in your webpack config

'use strict';
const path = require('path');
const { NormalModuleReplacementPlugin } = require('webpack');
module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    node: {
        __dirname: false,
        __filename: false
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        alias: { 'react/jsx-runtime': require.resolve('jsx-runtime') }
    },
    devtool: 'source-map',
    plugins: [
        // Ignore knex dynamic required dialects that we don't use
        new NormalModuleReplacementPlugin(
            /m[sy]sql2?|oracle(db)?|pg-(native|query)/,
            'pg',
        ),
    ],
};
ajoslin103 commented 3 years ago

maybe: https://www.dslemay.com/blog/2020/05/22/how-to-bundle-knex-with-webpack-for-serverless