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 ?

Thank you

Answer 1

Unfortunately, most of the Web3 stack relies heavily on window, browser and external, crypto dependencies which aren't available on server-side. This isn't just an issue with Gatsby, but other SSR and static site generators (e.g. Next.js) as well.

There are a few workarounds though. See Using Client-Side Only Packages on Gatsby

1. Use a different library or approach

2. Add client-side package via CDN

3. Load client-side dependent components with loadable-components

4. Use React.lazy and Suspense on client-side only

Depending on your requirements #1 is likely not an option. I've had better success using ethers, instead of web3. But you'll likely run into similar issues with other packages at some point.

A combination of #2 and 3/4 will be the way to go. First, remove the packages (web3) that are causing issues and load them either from gatsby-browser.js or using react-helmet on the page/component that's using it.

gatsby-browser.js

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => {
  window.onload = () => {
    addScript("https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js")
  }
}

react-helmet

<Helmet>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js" />
</Helmet>

You should now be able to use web3. Make sure to check if you're running in browser, using typeof window !== "undefined". A complete code example:

import React from 'react'
import { Helmet } from "react-helmet"

export default function Web3() {
    const [blockNr, setBlockNr] = React.useState()
    const isBrowser = typeof window !== "undefined"

    async function getBlockNumber() {
        console.log('Init web3')
        const web3 = new window.Web3('https://cloudflare-eth.com')
        const currentBlockNumber = await web3.eth.getBlockNumber()
        setBlockNr(currentBlockNumber)        
    }

    return (
        <div>
            {/* Can use either react-helmet or include the script from gatsby-browser */}
            <Helmet>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js" />
            </Helmet>
            {isBrowser && 
                <div>
                    <p>Running in browser..</p>
                    <button onClick={getBlockNumber}>Get Block #</button>
                </div>
            }
            
            {blockNr && <span>{blockNr}</span>}
        </div>
    )
}

You probably still want to load things Lazy or using loadable-components. E.g.

const LazyWeb3BlockNr = React.lazy(() =>
  import("../components/Web3BlockNr")
)

And in your page

<div>
    {typeof window !== "undefined" && 
        <React.Suspense fallback={<div />}>
            <LazyWeb3BlockNr />
        </React.Suspense>
    }
</div>

Complete code example at https://github.com/wslyvh/web3-gatsby

Answer 2

Do the following:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Create a config-overrides.js in your root and add:

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

Now change scripts: in your package.json to:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

And voila, worked for me after many wasted hours !