Webpack v5 support

Polyfils aren’t no longer injected for the latest version of webpack. GatsbyJS is already using webpack v5. I’d also like to upgrade my own umd package which uses WC.

Example error message during webpack build:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }`

Issue 1: Gotta have those polyfils

Rather than force every app to manually add these packages, they should already be included in the WC packages.

Issue 2: Using Node.JS modules in a browser application

Is this a concern? I read that its not recommended but haven’t researched enough to know for sure. Similar issue in another package: https://github.com/angular/angular-cli/issues/20819#issuecomment-842307462

Temporary Solution

In your application that uses Webpack V5, make the following changes

yarn add stream-browserify stream-http crypto-browserify https-browserify os-browserify util url assert

Then update your webpack config. Here’s a GatsbyJS example:

// gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        util: require.resolve(`util/`),
        url: require.resolve(`url/`),
        assert: require.resolve(`assert/`),
        crypto: require.resolve(`crypto-browserify`),
        os: require.resolve(`os-browserify/browser`),
        https: require.resolve(`https-browserify`),
        http: require.resolve(`stream-http`),
        stream: require.resolve(`stream-browserify`),
      },
    },
  })
}

See stack overflow for more info

[4skinSkywalker]

I did it differently. I’ve modified my package.json the following way, and it compiled:

{
  "name": "my-dapp",
  "version": "0.0.0",
  "browser": {
    "os": false,
    "https": false,
    "http": false,
    "stream": false,
    "util": false,
    "url": false,
    "assert": false,
    "crypto": false
  },
  ...
}

I don’t think we should depend from Node.js stuff in our browser dapp.

P.S.: after recompiling it broke again with Uncaught TypeError: util.inherits is not a function. I’ve fixed it with:

{
  "name": "ethbox-dapp",
  "version": "0.0.0",
  "browser": {
    "os": false,
    "https": false,
    "http": false,
    "stream": false,
    "util": "./node_modules/util",
    "url": false,
    "assert": false,
    "crypto": false
  },
  ...
}

P.P.S.: after compiling again it broke once again with something related to url.parse. I’ve fixed with:

"browser": {
    "os": false,
    "https": false,
    "http": false,
    "stream": false,
    "util": "./node_modules/util",
    "url": "./node_modules/url",
    "assert": false,
    "crypto": false
  },
  ...
}

It’s ridicolous that we have to deal with all this.

[rubo]

For CRA v5, this can be fixed with CRACO or react-app-rewired. In case of CRACO, the .cracorc.js should look like

const { ProvidePlugin } = require('webpack');

module.exports = {
  webpack: {
    configure: {
      ignoreWarnings: [/Failed to parse source map/],
      resolve: {
        fallback: {
          assert: require.resolve('assert/'),
          crypto: require.resolve('crypto-browserify/'),
          http: require.resolve('stream-http/'),
          https: require.resolve('https-browserify/'),
          os: require.resolve('os-browserify/browser'),
          stream: require.resolve('stream-browserify/'),
          url: require.resolve('url/'),
          util: require.resolve('util/')
        }
      }
    },
    plugins: [
      new ProvidePlugin({
        Buffer: ['buffer', 'Buffer']
      })
    ]
  }
};

And the following packages must be included in the packages.json:

• assert
• crypto-browserify
• https-browserify
• os-browserify
• stream-browserify
• stream-http
• url
• util