CODEWITHSUNDEEP
typescriptwebpackelectronknex.js
Timo
Timo

Reputation: 43

Knex with Typescript and Electron. Using Knex causing node_module errors

I have a working Electron application that uses Typescript. This main.ts file is for the main process.

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

// import knex from 'knex';
// import config from '../knexconfig';

// const db = knex(config);

let mainWindow: Electron.BrowserWindow | null;


async function init() {
    // db.select('*').from('users').then((rows) => {
    //     console.log(rows);
    // });

    createWindow();
}

function createWindow() {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = '1';

    if (process.env.NODE_ENV === 'development') {
        mainWindow.loadURL(`http://localhost:4000`);
        mainWindow.webContents.openDevTools();
    } else {
        mainWindow.loadURL(
            url.format({
                pathname: path.join(__dirname, 'index.html'),
                protocol: 'file:',
                slashes: true
            })
        );
    }

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

app.on('ready', init);

Right now there are 6 lines commented out at the top. As i said, its works as i show it right now. But when i add these comments to the code, i get 10 errors that are like this:

"Module not found. Can't resolve ... in ...\node_modules\knex\lib\dialects..."

All errors in detail:

ERROR in ./node_modules/knex/lib/dialects/better-sqlite3/index.js 7:11-36
Module not found: Error: Can't resolve 'better-sqlite3' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\better-sqlite3'
 @ ./node_modules/knex/lib/dialects/index.js 6:26-53
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/mssql/index.js 94:16-34
Module not found: Error: Can't resolve 'tedious' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\mssql'
 @ ./node_modules/knex/lib/dialects/index.js 8:15-33
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/mysql2/index.js 15:11-28
Module not found: Error: Can't resolve 'mysql2' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\mysql2'
 @ ./node_modules/knex/lib/dialects/index.js 10:16-35
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/oracledb/index.js 37:21-40
Module not found: Error: Can't resolve 'oracledb' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\oracledb'
 @ ./node_modules/knex/lib/dialects/index.js 12:18-39
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/oracledb/utils.js 40:19-38
Module not found: Error: Can't resolve 'oracledb' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\oracledb'
 @ ./node_modules/knex/lib/dialects/oracledb/index.js 16:4-22
 @ ./node_modules/knex/lib/dialects/index.js 12:18-39
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/pgnative/index.js 13:11-31
Module not found: Error: Can't resolve 'pg' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\pgnative'
 @ ./node_modules/knex/lib/dialects/index.js 13:18-39
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/postgres/index.js 63:11-24
Module not found: Error: Can't resolve 'pg' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\postgres'
 @ ./node_modules/knex/lib/dialects/index.js 14:18-39
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/postgres/index.js 192:8-34
Module not found: Error: Can't resolve 'pg-query-stream' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\postgres'
 @ ./node_modules/knex/lib/dialects/index.js 14:18-39
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/redshift/index.js 44:11-24
Module not found: Error: Can't resolve 'pg' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\redshift'
 @ ./node_modules/knex/lib/dialects/index.js 15:18-39
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

ERROR in ./node_modules/knex/lib/dialects/sqlite3/index.js 42:11-29
Module not found: Error: Can't resolve 'sqlite3' in 'C:\Users\timom\WebstormProjects\am-calendar\node_modules\knex\lib\dialects\sqlite3'
 @ ./node_modules/knex/lib/dialects/index.js 16:17-37
 @ ./node_modules/knex/lib/knex-builder/internal/config-resolver.js 5:36-61
 @ ./node_modules/knex/lib/knex-builder/Knex.js 7:26-63
 @ ./node_modules/knex/lib/index.js 1:13-43
 @ ./node_modules/knex/knex.js 8:13-35
 @ ./electron/main.ts 8:0-24 10:9-13

10 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.89.0 compiled with 10 errors and 2 warnings in 1270 ms

Two errors say that im missing postgres and sqlite3, but i am using mysql as database type (which i also specify in the config) On the other hand, one error tells me that im missing mysql, which i have installed.

This is the config file to run the electron app:

const path = require('path');

module.exports = {
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    devtool: 'source-map',
    entry: './electron/main.ts',
    target: 'electron-main',
    module: {
        rules: [
            {
                test: /\.(js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
    },
};

This is the package.json

{
  "name": "am-calendar",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "scripts": {
    "dev:electron": "cross-env NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
    "dev:react": "cross-env NODE_ENV=development webpack-dev-server --config webpack.react.config.js --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@types/node": "^20.10.0",
    "electron": "^27.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.3",
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.2",
    "url-loader": "^4.1.1"
  },
  "dependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@types/react": "^18.2.38",
    "@types/react-dom": "^18.2.17",
    "babel-loader": "^9.1.3",
    "cross-env": "^7.0.3",
    "knex": "^3.0.1",
    "mysql": "^2.18.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Upvotes: 0

Views: 604

Answers (1)

Timo
Timo

Reputation: 43

I found this post https://github.com/knex/knex/issues/1128 and added this as suggested to my electron config

externals: {
  knex: 'commonjs knex'
}

now the config looks like this (and it works):

const path = require('path');

module.exports = {
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    devtool: 'source-map',
    entry: './electron/main.ts',
    target: 'electron-main',
    module: {
        rules: [
            {
                test: /\.(js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
    },
    externals: {
        knex: 'commonjs knex'
    }
};

Upvotes: 1

Related Questions