Cannot add web3 to React project

Question

I'm trying to add Web3 to a React project. I've initalized a new project with

gatsby new

Then, I've installed web3

npm install --save web3

And when I include web3 in index.js

import Web3 from 'web3'

And if I call

gatsby develop

I have some strange errors :

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227 Module not found: Error: Can't resolve 'crypto' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/swarm-js/lib/api-browser.js 32:12-40  @ ./node_modules/web3-bzz/lib/index.js 24:12-31  @ ./node_modules/web3/lib/index.js 34:10-29  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/ethereumjs-util/dist/account.js 4:13-30 Module not found: Error: Can't resolve 'assert' in >'/home/test/gatsby/test/test/node_modules/ethereumjs-util/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: { "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 }  @ ./node_modules/ethereumjs-util/dist/index.js 29:13-33  @ ./node_modules/ethereumjs-tx/dist/transaction.js 14:24-50  @ ./node_modules/ethereumjs-tx/dist/index.js 3:20-44  @ ./node_modules/web3-eth-accounts/lib/index.js 35:18-54  @ ./node_modules/web3-eth/lib/index.js 34:15-43  @ ./node_modules/web3/lib/index.js 30:10-29  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/ethereumjs-util/dist/object.js 4:13-30 Module not found: Error: Can't resolve 'assert' in >'/home/test/gatsby/test/test/node_modules/ethereumjs-util/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: { "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 }  @ ./node_modules/ethereumjs-util/dist/index.js 45:13-32  @ ./node_modules/ethereumjs-tx/dist/transaction.js 14:24-50  @ ./node_modules/ethereumjs-tx/dist/index.js 3:20-44  @ ./node_modules/web3-eth-accounts/lib/index.js 35:18-54  @ ./node_modules/web3-eth/lib/index.js 34:15-43  @ ./node_modules/web3/lib/index.js 30:10-29  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 30:76-93 Module not found: Error: Can't resolve 'crypto' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/web3-eth/lib/index.js 34:15-43  @ ./node_modules/web3/lib/index.js 30:10-29  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

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 '/home/test/gatsby/test/test/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 }  @ ./node_modules/web3-eth-accounts/lib/index.js 29:12-40  @ ./node_modules/web3-eth/lib/index.js 34:15-43  @ ./node_modules/web3/lib/index.js 30:10-29  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-providers-http/lib/index.js 26:11-26 Module not found: Error: Can't resolve 'http' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48  @ ./node_modules/web3-core/lib/index.js 22:23-58  @ ./node_modules/web3/lib/index.js 29:11-31  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-providers-http/lib/index.js 27:12-28 Module not found: Error: Can't resolve 'https' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48  @ ./node_modules/web3-core/lib/index.js 22:23-58  @ ./node_modules/web3/lib/index.js 29:11-31  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 21:11-26 Module not found: Error: Can't resolve 'http' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38  @ ./node_modules/web3-providers-http/lib/index.js 25:11-49  @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48  @ ./node_modules/web3-core/lib/index.js 22:23-58  @ ./node_modules/web3/lib/index.js 29:11-31  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 22:12-28 Module not found: Error: Can't resolve 'https' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38  @ ./node_modules/web3-providers-http/lib/index.js 25:11-49  @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48  @ ./node_modules/web3-core/lib/index.js 22:23-58  @ ./node_modules/web3/lib/index.js 29:11-31  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 23:9-22 Module not found: Error: Can't resolve 'os' in '/home/test/gatsby/test/test/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 }  @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38  @ ./node_modules/web3-providers-http/lib/index.js 25:11-49  @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48  @ ./node_modules/web3-core/lib/index.js 22:23-58  @ ./node_modules/web3/lib/index.js 29:11-31  @ ./src/pages/index.js 9:0-24  @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5  @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

webpack compiled with 10 errors

I've tried to install these modules manually, add them in package.json, etc. But nothing works.

Can you help me?

Answer 1

This worked for me. Add the below to your gatsby-node.js config:

const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                Buffer: [require.resolve("buffer/"), "Buffer"],
            }),
        ],
        resolve: {
            fallback: {
                "crypto": false,
                "stream": require.resolve("stream-browserify"),
                "assert": false,
                "util": false,
                "http": false,
                "https": false,
                "os": false
            },
        },
    })
}