Module not found: Can't resolve 'fs' - NextJS

Question

I'm trying to use node-jsencrypt with NextJS (tsx):

index.tsx

import JSEncrypt from 'node-jsencrypt';

package.json

"node-jsencrypt": "^1.0.0"

Log

error - ./node_modules/node-jsencrypt/index.js:2:0

Module not found: Can't resolve 'fs'

Notes: I didn't find the 'webpack.config.js' file, as I saw in some topics.

if you are trying to use it in the browser side, it won’t work, because it is a nodejs library. — luisbar, May 11 '21 at 02:18
you need an isomorphic library, but for fs I think that it does not exists, [this link explain about building an isomorphic package](https://hackernoon.com/building-isomorphic-javascript-packages-1ba1c7e558c5) — luisbar, May 11 '21 at 02:21
Related: https://stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application — Ciro Santilli OurBigBook.com, Dec 15 '21 at 11:49

Marcin Wosinek · Answer 1 · 2021-05-11T07:31:39.253

Ok, I played around with this issue & I think I have what cover all possible combinations. In the repo you can find working examples. There are 3 possible approaches, and the right one will depend on what's already in your project - details that were unspecified in the original question.

Solution while using webpack 5 next.config.js

module.exports = {
  future: {
    webpack5: true, // by default, if you customize webpack config, they switch back to version 4. 
      // Looks like backward compatibility approach.
  },
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
        // by next.js will be dropped. Doesn't make much sense, but how it is
      fs: false, // the solution
    };

    return config;
  },
};

Solution while using webpack 4 - next.config.js

module.exports = {
  webpack(config) { // we depend on nextjs switching to webpack 4 by default. Probably they will 
    // change this behavior at some future major version.
    config.node = {
      fs: "empty", // webpack4 era solution 
    };

    return config;
  },
};

You could consider using other library. According to node-jsencrypt readme they are node port of jsencrypt, and here I assume you try to build for browser. The node library got stuck at version 1, while the original library is already at version 3. As I checked in the last commit on main, if you use this library, it's building just fine without any issues.

Original, nextjs unaware answer:

Since version 5, webpack doesn't include polyfiles for node libraries. In your case, you most likely need to add resolve.fallback.fs: false to your webpack config.

More about this option- https://webpack.js.org/configuration/resolve/#resolvefallback It mentioned in v4 to v6 migration guide, if this is your case: https://webpack.js.org/migrate/5/

Second solution does not work on me: "configuration[0].node has an unknown property 'fs'" First one seem to work. — Dentrax, Feb 21 '22 at 23:18

Olamilekan Oluwatobiloba · Answer 2 · 2021-05-13T08:53:45.033

1

In the next.config.js file add the code below

build: {
extend(config, {}) {
    config.node = {
        fs: 'empty'
    }
}

},

edited May 13 '21 at 08:53

answered May 10 '21 at 23:09

Olamilekan Oluwatobiloba

36
2

1

I'm using next.config.js, do you know how to add this? – Naldo Sales May 10 '21 at 23:53
I mean next.config.js not nuxt.config.js – Olamilekan Oluwatobiloba May 13 '21 at 08:54
1

ok, just add next.config.js at then root directory. then add module.exports = {build: { extend(config, {}) { config.node = { fs: 'empty' } }} – Olamilekan Oluwatobiloba May 13 '21 at 11:53
Unfortunately this seemed to have no effect for me, even after quitting and re-running `yarn dev`. – Ryan Feb 03 '22 at 19:32

score 0 · Answer 3 · answered May 25 '23 at 09:47

I was also having the same issue when integrating sendGrid. However, I solved by adding a webpack property in next.config.js file like below:

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve = {
      ...config.resolve,
      fallback: {
        fs: false,
      },
    };
    return config;
  },
};

module.exports = nextConfig;

Module not found: Can't resolve 'fs' - NextJS

3 Answers3

Linked