Webpack 5: Module not found: Can't resolve 'http'

I’m importing ethersjs into my Nextjs SPA via import { ethers } from "ethers"; and I’m getting the below error:

error - ./node_modules/@ethersproject/web/lib.esm/geturl.js:11:0
Module not found: Can't resolve 'http'

Related to: https://github.com/ethers-io/ethers.js/issues/349

[jadbox]

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.

[ricmoo]

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. 😃