Cannot resolve module 'fs'

[najamkhn]

I'm not sure why but I've been getting it everytime when I install loki from npm install and initialise it with the following lines:

import Loki from 'lokijs'
const ldb = new Loki('example.db')

[VladimirTechMan]

@najamkhn, just in case, are you trying to build a web-client app (= to be running in the browser) using LokiJS with the webpack / babel toolchain (or alike)?

[najamkhn]

Yes using it with webpack and building web app.

[VladimirTechMan]

@najamkhn Okay, that's what I suspected, based on the specific issue that you reported. But I needed to double-check my guess with you first. What you need to do is, to add the following configuration section and parameters into your webpack.config.js file:

node: { fs: 'empty' }

[VladimirTechMan]

@najamkhn Also, depending on your specific configuration and other modules that you use in your web app, you may need to extend that section above to something like:

node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      'crypto': 'empty'
},

[VladimirTechMan]

@najamkhn Finally, in the case if you need a piece of Webpack's official documentation on that part, you can refer to: https://webpack.github.io/docs/configuration.html#node

[jetiny]

will you extract it outside ?

[VladimirTechMan]

@jetiny, extract what? I am not sure if I understand your question. Please, elaborate.

[obeliskos]

Thanks to all who answered, I believe this is resolved. In future releases we may extract the (node) filesystem adapter out into its own module.

[jamesmikesell]

For what it's worth, I was having this problem with Angular 5 and Angular CLI 1.5.0 when running unit tests, but not when doing a regular build / serve.

While the webpack.config that angular cli was using already had fs: 'empty' set, the problem was that karma was using different settings for webpack. I fixed this issue by putting the following in my karma.config.js

    webpack: {
      node: {
        fs: 'empty'
      }
    }

The nice thing about this problem / solution was that it doesn't require having to eject the webpack config that angular cli is using.

[davidsavoie1]

Would someone give me some guidance as to how to fix the configuration in Rollup instead of Webpack? I also get the fs is not defined error. I tried adding

node: {
  fs: "empty",
  net: "empty",
  tls: "empty",
  crypto: "empty",
}

at the root of the default exported object of the rollup.config.js file with no success...

EDIT: Finally found it! I had to install node-globals and node-builtins plugins and use them after the commonjs one (for a Svelte app). Here's the simplified configuration:

import commonjs from "@rollup/plugin-commonjs";
import globals from "rollup-plugin-node-globals";
import builtins from "rollup-plugin-node-builtins";

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  },
  plugins: [
    commonjs(),
    globals(),
    builtins(),
};

[jeremychone]

Thanks @davidsavoie1 Big time-saver, I was going to give up.

I wished LokiJs would be more browser-friendly out of the box, or have a lokijs-browser. Anyway, the functionalities look to be what I am looking for.