build(relay-reactjs): ensure cjs files are processed by webpack

This is because @chainsafe/libp2p includes one cjs module.

Can be avoided if facebook/create-react-app#12605 is merged.

relay-reactjs-chat-new/craco.config.js

@@ -0,0 +1,26 @@
+const {getLoaders, loaderByName} = require("@craco/craco");
+
+module.exports = {
+    webpack: {
+        configure: (webpackConfig) => {
+            const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName("babel-loader"));
+
+            if (hasFoundAny) {
+                matches.forEach(c => {
+                    // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
+                    if (c.loader.test.toString().includes("mjs")) {
+                        // If your project uses typescript then do not forget to include `ts`/`tsx`
+                        if (c.loader.test.toString().includes('jsx')) {
+                            c.loader.test = /\.(js|cjs|mjs|jsx)$/
+                        } else {
+                            c.loader.test = /\.(js|cjs|mjs)$/
+                        }
+                    }
+                });
+            }
+
+            return webpackConfig;
+        }
+    }
+}
+

relay-reactjs-chat-new/package.json

@@ -14,10 +14,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "pnpm": {
     "overrides": {
@@ -41,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@craco/craco": "7.0.0-alpha.7"
   }
 }