fs.existsSync is not a function

[0Franky]

Hi,
I'm developping an app with angular 9 and electron.
I'm trying to using this db but I'm unable to make it work.

This is my DBHandler typescript code:

import * as low from "lowdb"
import * as FileSync from "lowdb/adapters/FileSync"
const adapter = new FileSync('db.json')
const db = low(adapter)
...
get(): any[] {
return db.get('posts').find().value()
}

And to compile it, I must set this on my package.json:

"browser": {
"child_process": false,
"clearImmediate": false,
"setImmediate": false,
"https": false,
"http": false,
"crypto": false,
"tls": false,
"zlib": false,
"os": false,
"stream": false,
"vm": false,
"fs": false,
"path": false,
"graceful-fs": false
},
"node": {
"global": true,
"net": true,
"process": true,
"module": true,
"clearImmediate": true,
"setImmediate": true,
"https": true,
"http": true,
"crypto": true,
"tls": true,
"zlib": true,
"os": true,
"path": true,
"stream": true,
"vm": true,
"fs": true,
"child_process": true,
"graceful-fs": true
},

After compiling and lunch app, in electron dev tools I read this error:

Uncaught TypeError: fs.existsSync is not a function
at FileSync.read (FileSync.js:32)
at LodashWrapper.db.read (main.js:32)
at push../node_modules/lowdb/lib/main.js.module.exports (main.js:51)
at Module../src/utils/DBHandler.ts (DBHandler.ts:6)
at webpack_require (bootstrap:79)
at Module../src/utils/Class1Utils.ts (Class1Utils.ts:1)
at webpack_require (bootstrap:79)
at Module../src/scraper/Class2Utils.ts (Class2Utils.ts:1)
at webpack_require (bootstrap:79)
at Module../src/scraper/Class3Utils.ts (Class3Utils.ts:31)

read | @ | FileSync.js:32

-- | -- | --
  | db.read | @ | main.js:32
  | push../node_modules/lowdb/lib/main.js.module.exports | @ | main.js:51
  | ./src/utils/DBHandler.ts | @ | DBHandler.ts:6
  | webpack_require | @ | bootstrap:79
  | ./src/utils/Class1Utils.ts | @ | Class1Utils.ts:1
  | webpack_require | @ | bootstrap:79
  | ./src/scraper/Class3Utils.ts | @ | Class3Utils.ts:1
  | webpack_require | @ | bootstrap:79
  | ./src/scraper/Class4Utils.ts | @ | Class5Utils.ts:31
  | webpack_require | @ | bootstrap:79
  | ./src/app/home/apphome.component.ts | @ | app.module.ts:56
  | webpack_require | @ | bootstrap:79
  | ./src/app/home/index.ts | @ | index.ts:1
  | webpack_require | @ | bootstrap:79
  | ./src/app/app-routing.module.ts | @ | app-routing.module.ts:1
  | webpack_require | @ | bootstrap:79
  | ./src/app/app.module.ts | @ | app.module.ts:1
  | webpack_require | @ | bootstrap:79
  | ./src/main.ts | @ | main.ts:1
  | webpack_require | @ | bootstrap:79
  | 0 | @ | callbackOnClick.js:32
  | webpack_require | @ | bootstrap:79
  | checkDeferredModules | @ | bootstrap:45
  | webpackJsonpCallback | @ | bootstrap:32
  | (anonymous) | @ | main-es2015.js:1

I hope someone can help me.
Thank you

[0Franky]

I solved it changing in FileSync.js at line 11:

var fs = require('graceful-fs');

to

var fs = window.require('graceful-fs');

Now it seems to works!

[0Franky]

Before close this issue, it can be good give some feedback from others, or if this fix works, a pull request.

[angeal185]

This is a common electron/webpack bundle issue people have that is not specific to lowdb. If there is no config issues in your code, this issue belongs with the many other similar ones on webpack. You wouldn't have this issue if you weren't using webpack.

Think of it like this, if the whole point of using webpack is because it bundles your code, what point is there in using it if it cant bundle your code.

[0Franky]

Many others dependencies works for me.
Unfortunately I must use webpack on electron to resolve some Angular/Electron incompatibility.
Maybe can be useful write it somewhere and how to solve it.
Anyway, this is a good DB.

UPDATE
Even if I remove my custom webpack config file and webpack launch script, nothing change. It looks like if Angular build all with own webpack configuration in different bundles.

[vjau]

I guess you are running your code in the renderer thread and not in the main thread, which is a cause of a lot of issue with electron when using library designed for Node.
AFAIK you can use lowdb in the browser, but then you have to use localstorage, not local files.

[0Franky]

As I told, my code is wrapped in angular project, and I don't think it have a main thread or method to run code on it. So all code is managed by angular. But my app have to run on electron framework, so how it works now is fine for me.
Anyway, this issue would like to be an help to inexperienced users (like me) to solve this error.

[ShaxXxboz]

I solved it changing in FileSync.js at line 11:

var fs = require('graceful-fs');

to

var fs = window.require('graceful-fs');

Now it seems to works!

I resolved the issue thanks to this answer. But got it again when app was built.
@0Franky Was there any problem with you built app?

[ShaxXxboz]

For anyone who is still having this issue:
Follow this answer.

1. Create a preload.js file with the code:
   window.fs = require("graceful-fs");

2. Preload this file in your main.js via webPreferences:
   mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false, preload: __dirname + '/preload.js' } });

3. In your adapter file:
   change
   var fs = require('graceful-fs');
   to:
   var fs = window.fs;

[0Franky]

My app work well after built, but your answer is very good for a global preload for all your plugins. Very good! @ShaxXxboz

[Zenahr]

I ran into this problem today on a simple React app built using the create-react-app boilerplate. What would be the right steps to take in that case? Maybe we could add a little section to the readme for users who wanna use create-react-app together with lowdb or even provide a template.

[itekaf]

I have the same issue when used angular with electron. For me problem resolve is add following config to the angular.webpack.js:

config.externals = {
      "fs": 'require("fs")'
    };

I used Angular 8