SYED IMAM
Syed Imam

Follow

Syed Imam

Follow
Try this if you are facing issues while using web3JS in ReactJS

Try this if you are facing issues while using web3JS in ReactJS

SYED IMAM's photo
SYED IMAM
ยทJul 1, 2022ยท

2 min read

Uncaught ReferenceError: process is not defined

If you are getting this error right after importing the Web3js package in your ReactJs application then you are using create-react-app version >=5 for this reason you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

SOLUTION:

Step1:

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

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

STEP2:

Create config-overrides.js in the root of your project folder with the content:

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;
}

Step3:

Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired.

Change your scripts from this:

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

TO THIS :

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

Conclusion:

That is it now you can use web3js package in your ReactJs Application. you can also view offlical web3js Github repo: (github.com/ChainSafe/web3.js/tree/v1.7.4)

Did you find this article valuable?

Support SYED IMAM by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this