Using better-sqlite3 in an Angular + Electron app: Module parse failed: Unexpected character

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 better-sqlite3 using:

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

And I've tried to use it doing:

import * as sqlite from 'better-sqlite3';

// ...

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

However when the application builds it fails with:

ERROR in ./node_modules/better-sqlite3/build/better_sqlite3.node 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 (Source code omitted for this binary file) ERROR in ./node_modules/integer/build/integer.node 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 (Source code omitted for this binary file)

It looks like I'm not the first experiencing this issue when using Electron. Infact, the issue has been discussed here and and here however I couldn't find a solution that works for me.

didil didil · Accepted Answer · 2021-03-20T20:53:12

Have you tried to use @angular-builders/custom-webpack?

npm i @angular-builders/custom-webpack --save-dev

in your angular.json file, set this under your architect:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./angular.webpack.js"
      },

and then add a custom config file angular.webpack.js at the root of your project:

module.exports = {
  externals: {
    'better-sqlite3': "require('better-sqlite3')"
  }
};

Using better-sqlite3 in an Angular + Electron app: Module parse failed: Unexpected character

1 Answers