Webpack errors when attempting to use Drizzle.

[dkillen]

The errors set out below were encountered when following the Getting Started with Drizzle and React guide. The errors are first encountered when a Drizzle store is installed and configured in the react app. Prior to that, the simple react app that is generated with create-react-app will run without error.

As the error messages state, a breaking change was introduced in Webpack version 5. Drizzle itself does not use Webpack. The source of the errors appears to be the react-scripts package which is installed by create-react-app. There is a workaround, but it requires a user to dive down into the node_modules and modify the Webpack configuration in the react-scripts package to use fallbacks for the identified node polyfills (node_modules/react-scripts/config/webpack.config.js). The user will also need to install additional packages for the fallbacks. Using an earlier version of create-react-app does not produce a more favourable result. This issue appears to arise from one or more of Drizzle's dependencies or sub-dependencies. They most likely need to be updated.

Node: v14.18.2
npm: v6.14.15

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/cipher-base'

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: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/eth-lib/lib'

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: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 39:31-48

Module not found: Error: Can't resolve 'assert' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/ethereumjs-util/dist.browser'

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: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/ethereumjs-util/dist.browser'

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: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 14:31-48

Module not found: Error: Can't resolve 'assert' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/ethereumjs-util/dist.browser'

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: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/web3-eth-accounts/lib'

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: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'

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: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/web3-providers-http/lib'

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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/web3-providers-http/lib'

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: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can't resolve 'url' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/web3-providers-ws/lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/xhr2-cookies/dist'

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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/xhr2-cookies/dist'

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: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/xhr2-cookies/dist'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in '/Users/david/dev/trufflesuite/reprod/2022/03/03/drizzle-react-create-react-app-v4/client/node_modules/xhr2-cookies/dist'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

[rsodre]

Without looking at your logs (I know nothing of webpack), I just remember when I was starting with Drizzle (and React!) that trying to use webpack was a big mistake, and moving to next.js was my solution.

[Murf]

Same issue here

[claudio-walser]

I do have the same issue with
node v16.14.0
npm 8.5.3

[bartolja]

Have the same issue

[myusf01]

It's because of Webpack 5 doesn't inculed polyfills anymore, I've solved the issue by installing a webpack plugin named node-polyfill-webpack-plugin and adding it to mt webpack configuration file. After that all of my problems were solved.

npm i node-polyfill-webpack-plugin

// vue.config.js

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  }
})