Using sqlite3 in an Angular + Electron app: Critical dependency: the request of a dependency is an expression

Question

In my Angular + Electron app I'm trying to install some sqlite library in order to read contents from an sqlite database file.

I've installed sqlite3 using:

npm install sqlite3
npm install --save-dev @types/sqlite3

And I've tried to use it doing:

import * as sqlite from 'sqlite3';

// ...

const myDb = new sqlite.Database('/path/to/file.sqlite');

However when the application builds it fails with:

WARNING in ./node_modules/sqlite3/lib/sqlite3.js 4:14-35 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/node-pre-gyp/lib/pre-binding.js 20:22-48 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/node-pre-gyp/lib/util/versioning.js 17:20-67 Critical dependency: the request of a dependency is an expression

WARNING in ../node_modules/npm/lib/npm.js 124:16-56 Critical dependency: the request of a dependency is an expression

WARNING in ../node_modules/npm/lib/npm.js 235:10-25 Critical dependency: the request of a dependency is an expression

WARNING in ../node_modules/npm/node_modules/encoding/lib/iconv-loader.js 9:12-34 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/node-pre-gyp/lib/util/compile.js Module not found: Error: Can't resolve 'node-gyp' in '/home/shin/sources/Keira3/node_modules/node-pre-gyp/lib/util'

WARNING in ./node_modules/node-pre-gyp/lib/util/nw-pre-gyp/index.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| |

ERROR in ./node_modules/node-pre-gyp/lib/info.js Module not found: Error: Can't resolve 'aws-sdk' in '/home/shin/sources/Keira3/node_modules/node-pre-gyp/lib' ERROR in ./node_modules/node-pre-gyp/lib/publish.js Module not found: Error: Can't resolve 'aws-sdk' in '/home/shin/sources/Keira3/node_modules/node-pre-gyp/lib' ERROR in ./node_modules/node-pre-gyp/lib/unpublish.js Module not found: Error: Can't resolve 'aws-sdk' in '/home/shin/sources/Keira3/node_modules/node-pre-gyp/lib' ERROR in ../node_modules/npm/bin/npm-cli.js 1:0 Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

!/usr/bin/env node | ;(function () { // wrapper in case we're in module_context mode | // windows: running "npm blah" in this folder

will invoke WSH, not node.

In this thread a solution to this issue is posted and it's about adding the following to the webpack config file:

externals: { 'sqlite3':'commonjs sqlite3', }

however it is not clear to me where to add such config in my Angular app.

Francesco Borzi Francesco Borzi · Accepted Answer · 2020-02-24T22:27:24

I solved my issue using Custom webpack builders (angular-builders).

Allow customizing build configuration without ejecting webpack configuration (ng eject)

After installing it, I'm now able to specify a custom webpack config where I've added:

module.exports = {
    externals: {
        'sqlite3':'commonjs sqlite3'
    }
};

I also had to run node postinstall && electron-builder install-app-dep in order to make it work.

Using sqlite3 in an Angular + Electron app: Critical dependency: the request of a dependency is an expression

!/usr/bin/env node | ;(function () { // wrapper in case we're in module_context mode | // windows: running "npm blah" in this folder

1 Answers