ethers.js: Webpack 5: Module not found: Can't resolve 'http'

I got it working by yarn install http-browserify https-browserify and updating next.config.js to the below:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.resolve.alias.https = "https-browserify";
    config.resolve.alias.http = "http-browserify";
    return config;
  },
};

It would be great if this was documented or have a simpler method to define the needed polyfills, as I’d imagine other developers will face the same problem upgrading to webpack 5.

Wow. I didn’t know you could specify non-standard fields. :p

That field is meant more as an internal build system flag.

I have a new build system nearly done which should make everything cooperate with webpack/rollup/etc. much better without these hacks… It’s coming. 😃

This should be addressed in 5.0.20.

You should no longer need to specify mainFields in Webpack or rollup configs, as the module and browser fields point to pre-bundled/aliased clusters of files. And by splitting apart some libraries, tree-shaking seems much happier.

Try it ou and let me know. Thanks! 😃

same issue here!

Since I’m doing only static browser builds, I updated my config with this to just not polyfill over the node modules for the server build. I -think- the client build is working as it should as it gets the mainFields>browser flag.

config.resolve.alias["https"] = false;
config.resolve.alias["http"] = false;

hey @ricmoo ! I’m a little lost here too as I think Nextjs should already be adding “browser” to mainFields, so I don’t know why Nextjs is still complaining. I also tried adding config.resolve.alias["./geturl"] = "browser-geturl" and config.resolve.alias["geturl"] = "browser-geturl" without success.

(forgot to mention you need to add it to the "mainFields" property in the WebPack config)