Webpack v5 support

[pi0neerpat]

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: angular/angular-cli#20819 (comment)

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

[pi0neerpat]

RedwoodJS projects v0.36.0 and above use Webpack V5 (release notes). Here's a fix for using Wallet Connect in RedwoodJS until this issue is resolved:

We need to add 8 missing node modules manually to the Redwood web app's webpack. If you haven't run this command already, create the config file:

yarn rw setup webpack

Then add the following to your config in web/config/webpack.config.js:

const webpack = require('webpack')

// See https://github.com/WalletConnect/walletconnect-monorepo/issues/584
config.resolve.fallback = {
    os: require.resolve(`os-browserify/browser`),
    https: require.resolve(`https-browserify`),
    http: require.resolve(`stream-http`),
    stream: require.resolve(`stream-browserify`),
    util: require.resolve(`util/`),
    url: require.resolve(`url/`),
    assert: require.resolve(`assert/`),
    crypto: require.resolve(`crypto-browserify`),
};
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ['buffer', 'Buffer'],
    })
  )

Now install the missing 8 packages in web

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

Test the app builds properly in development and production

yarn rw dev

# It works in development? Great!

yarn rw build

Update 10/19

As mentioned in microsoft/PowerBI-visuals-tools#365 (comment) you may also need to add process as a dev dependency either in your web or in the package that uses walletconnect

yarn add -D process

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

[pi0neerpat]

It's ridicolous that we have to deal with all this

Such is the way of FOSS and Webpack V5. Maintainers can't know/solve everything. Thanks for providing an alternative solution!

[sawirricardo]

Hi, I also encountered this. May be we should add temporary solution in the readme for those with Webpack 5?

[pantonis]

This package is not compatible with angular (webpack v5). such a shame. Any update on this?

[pantonis]

@4skinSkywalker Can you please post your package.json?

[rubo]

Also, both v1 and v2 don't work for React when react-scripts v5 is used.

[BenGOsborn]

Also, both v1 and v2 don't work for React when react-scripts v5 is used.

I'm having the same problem regarding "failed to parse source maps" with react-scripts v5 and @web3-react/walletconnect-connector which I believe is due to webpack 5.

I've heard that downgrading to react-scripts v4 is the best option right but unfortunately, that isn't an option for me.

[rubo]

@BenGOsborn Yep, I ended up downgrading to react-scripts v4 although that's not the solution I'm looking for.

[bajcmartinez]

Webpack 5 is been out for quite some time now, and provides very interesting features, some of them that I'm using and I can't simply downgrade.

I'm currently stuck with the same "failed to parse source maps" error, and can't get it to work, hopefully, we get some good news soon.

If anyone solves it, please post it so others can also move on.

Thanks

[ghost]

Also, both v1 and v2 don't work for React when react-scripts v5 is used.

Same here

[mohammad-meld-gold]

temporary solution for those who are using react-scripts v5:
Add these lines of code to the entry point of your application and also add buffer package to your project (yarn add buffer)
(note: If you are using SSR you should also check to run this code on the client side only typeof window !== "undefined")

import { Buffer } from "buffer";

`if (!window.Buffer) window.Buffer = Buffer;`

Although this will able you to open the wallet connect modal and everything works perfectly but you'll see a lot of warnings with this context: (at least in CRA)
Failed to parse source map from

I assume by adding support of webpack 5 in this project all of these problems will be resolved.
Hope that the developers team could manage to do it as soon as possible.

[alexnguyennz]

import { Buffer } from "buffer";

if (!window.Buffer) window.Buffer = Buffer;

Hi there, any other changes to your webpack, etc.? I still can't get past this buffer is not defined error with react-scripts v5.

[mohammad-meld-gold]

import { Buffer } from "buffer";
if (!window.Buffer) window.Buffer = Buffer;

Hi there, any other changes to your webpack, etc.? I still can't get past this buffer is not defined error with react-scripts v5.

yes, I just added those lines at index.tsx file available at the root of /src, also these are versions of packages which I'm using currently:

[AlGokk]

Any news how to overcome this issue?

[pi0neerpat]

Any news how to overcome this issue?

Howdy! There are several users who posted a fix above. If that doesn't work let me know.

[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