`Module not found: Can't resolve 'fs'` when using near-api-js in Next.js

Question

I have a Next.js app using near-api-js, and I'm getting this error.

It's confusing since I'm not using unencrypted_file_system_keystore anywhere.

error - ./node_modules/near-api-js/lib/key_stores/unencrypted_file_system_keystore.js:7:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/near-api-js/lib/key_stores/index.js

P.S. This question is specifically about using near-api-js. I'll update the answer when I learn of a better solution to this particular problem since there are known bugs in that library and my current answer below feels like a wonky workaround.

Answer 1

Changing the contents of /next.config.js to the following seemed to fix it for me:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  future: {
    webpack5: true, // By default, if you customize webpack config, they switch back to version 4. (backward compatibility?)
  },
  webpack(config) {
    // eslint-disable-next-line no-param-reassign
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false, // https://stackoverflow.com/a/67478653/470749
    };

    return config;
  },
};

Thanks to https://stackoverflow.com/a/67478653/470749!

But I bet there is a bug in near-api-js. I doubt this step by me should have been necessary.