React script 5 fix

react-app-rewired module to install the additional configuration that webpack 5 left out using polyfills

Author: abdulmalik97

.eslintrc

@@ -29,6 +29,7 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "react/jsx-key": "off",
-    "react/no-unescaped-entities": "off"
+    "react/no-unescaped-entities": "off",
+    "@typescript-eslint/no-unused-expressions": "1"
   }
-}
+}

config-overrides.js

@@ -0,0 +1,22 @@
+const webpack = require("webpack");
+module.exports = function override(config, env) {
+  config.resolve.fallback = {
+    url: require.resolve("url"),
+    fs: require.resolve("fs"),
+    assert: require.resolve("assert"),
+    crypto: require.resolve("crypto-browserify"),
+    http: require.resolve("stream-http"),
+    https: require.resolve("https-browserify"),
+    os: require.resolve("os-browserify/browser"),
+    buffer: require.resolve("buffer"),
+    stream: require.resolve("stream-browserify"),
+  };
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  );
+
+  return config;
+};

package.json

@@ -8,23 +8,31 @@
     "@testing-library/user-event": "^12.1.10",
     "@walletconnect/web3-provider": "^1.6.6",
     "antd": "^4.16.13",
+    "assert": "^2.0.0",
+    "crypto-browserify": "^3.12.0",
+    "https-browserify": "^1.0.0",
     "magic-sdk": "7.0.0",
     "moralis": "^1.2.3",
+    "os-browserify": "^0.3.0",
     "react": "^17.0.2",
+    "react-app-rewired": "^2.2.1",
     "react-blockies": "^1.4.1",
     "react-dom": "^17.0.2",
     "react-moralis": "^1.2.1",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "url": "^0.11.0",
     "web-vitals": "^1.0.1",
     "yarn": "^1.22.17"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject",
     "devchain": "node Truffle/scripts/devChain.js",
     "connect": "moralis-admin-cli connect-local-devchain",
     "watch:events": "moralis-admin-cli add-contract",

src/components/Account/config.js

@@ -2,8 +2,8 @@ import Metamask from "./WalletIcons/metamaskWallet.png";
 import Coin98 from "./WalletIcons/Coin98.png";
 import WalletConnect from "./WalletIcons/wallet-connect.svg";
 import MathWallet from "./WalletIcons/MathWallet.svg";
-import TokenPocket from "./WalletIcons/TokenPocket.svg";
-import SafePal from "./WalletIcons/SafePal.svg";
+import TokenPocket from "!file-loader!./WalletIcons/TokenPocket.svg";
+import SafePal from "!file-loader!./WalletIcons/SafePal.svg";
 import TrustWallet from "./WalletIcons/TrustWallet.png";
 
 export const connectors = [

src/components/Contract/Contract.jsx

@@ -86,7 +86,7 @@ export default function Contract() {
               const params = forms[name].getFieldsValue();
 
               let isView = false;
-
+              /*eslint no-unsafe-optional-chaining: "error"*/
               for (let method of contract?.abi) {
                 if (method.name !== name) continue;
                 console.log(method);