Error while getting wallet balance using ethereum library in react js

Question

Error while getting wallet balance using ether library in ReactJS. As I mentioned in the title. When I tried to use the ether library that I did an NPM install of, I ran into a weird error, when checking localhost I got this error:

This is my error message:

Compiled with problems:X

ERROR in ./node_modules/node-gyp-build/node-gyp-build.js 1:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-build'

ERROR in ./node_modules/node-gyp-build/node-gyp-build.js 2:11-26

Module not found: Error: Can't resolve 'path' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-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: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

Module not found: Error: Can't resolve 'os' in '/Users/gustavopayano/Desktop/navbar/node_modules/node-gyp-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: { "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 }

This is my ReactJS component that implements the Metamask wallet connection code:

import { React, useState } from "react";
import "./App";
import Navbar from "./Navbar";
import "./css/Metamask.css";

function Metamask() {
  const [errorMessage, setErrorMessage] = useState(null);
  const [defaultAccount, setDefaultAccount] = useState(null);
  const [userBalance, setUserBalance] = useState(null);

  const ethers = require("ethers");

  const connectWallet = () => {
    if (window.ethereum) {
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((result) => {
          accountChanged(result[0]);
        });
    } else {
      setErrorMessage("Install MetaMask Please!");
    }
  };

  const accountChanged = (accountName) => {
    setDefaultAccount(accountName);
    getUserBalance(accountName);
  };

  const getUserBalance = (accountAddress) => {
    window.ethereum
      .request({
        method: "eth_getBalance",
        params: [String(accountAddress), "latest"],
      })
      .then((balance) => {
        setUserBalance(ethers.utils.formatEther(balance));
      });
  };

  return (
    <div className="metamask">
      <Navbar />
      <h1>Metamask Wallet Connection</h1>
      <button class="btn btn-secondary btn-md" onClick={connectWallet}>
        {" "}
        Connect Metamask
      </button>
      <h3>Address: {defaultAccount}</h3>
      <h3>Balance: {userBalance}</h3>

      {errorMessage}
    </div>
  );
}

export default Metamask;

connectWallet() The function checks whether the Metamask extension is installed in the user's browser. If installed, it sends a request to the Metamask extension to connect to the user's wallet. If the connection is successful, the accountChanged() function is called, which sets the defaultAccount state, and calls getUserBalance() to obtain the user's wallet balance. If the Metamask extension is not installed, the setErrorMessage() function will be called to display an error message to the user.

Answer 1

1. Add these to your devDependencies and run yarn/npm install .

"devDependencies": {
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"url": "^0.11.0"}

2. Run npm install (or yarn) to ensure all dependencies are downloaded.

3. Change the script in package.json to run with react-app-rewired:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"

4. Create config.overrides.js in the root folder and copy and paste the following content into it:

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

5. If there are any other errors, make sure to add a fallback in config.overrides.js to resolve it.