Have you ever got:

    error - <some-3rd-party-lib>:0

    Module not found: Can't resolve 'fs' // or process, Buffer, etc.

error in your nextjs app; and the all the solutions on stack overflow were pointing to something like:

// webpack.config.js
{
  resolve: {
        fallback: { "fs": false }
  }
}

when you didn't even have webpack.config.js?

Quick solution

It's all because nextjs is hiding its webpack configuration. It's simplifying for most use cases, but a bit of a pain in some others. The quick solution for it is to this into next.config.js:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

Longer overview

Links

• my video course on webpack