Replace react-app-rewired with cra-webpack-rewired

The second is more appropriate for react 5

examples/web-chat/config-overrides.js

@@ -1,29 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = (config, env) => {
-
-  // Override webpack 5 config from react-scripts to load polyfills
-  if (!config.resolve) config.resolve = {};
-  if (!config.resolve.fallback) config.resolve.fallback = {};
-  Object.assign(config.resolve.fallback, {
-      "buffer": require.resolve("buffer"),
-      "crypto": require.resolve("crypto-browserify"),
-      "stream": require.resolve("stream-browserify"),
-      // "assert": require.resolve("assert")
-    }
-  )
-
-  if (!config.plugins) config.plugins = []
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      'process.env.ENV': JSON.stringify(env),
-    })
-  )
-  config.plugins.push(
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-      Buffer: ['buffer', 'Buffer'],
-    }));
-
-  return config;
-}

examples/web-chat/config/webpack.extend.js

@@ -0,0 +1,56 @@
+const webpack = require('webpack');
+
+module.exports = {
+  dev: (config) => {
+    // Override webpack 5 config from react-scripts to load polyfills
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.fallback) config.resolve.fallback = {};
+    Object.assign(config.resolve.fallback, {
+        "buffer": require.resolve("buffer"),
+        "crypto": require.resolve("crypto-browserify"),
+        "stream": require.resolve("stream-browserify"),
+        // "assert": require.resolve("assert")
+      }
+    )
+
+    if (!config.plugins) config.plugins = []
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify("dev"),
+      })
+    )
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      }));
+
+    return config;
+  },
+  prod: (config) => {
+    // Override webpack 5 config from react-scripts to load polyfills
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.fallback) config.resolve.fallback = {};
+    Object.assign(config.resolve.fallback, {
+        "buffer": require.resolve("buffer"),
+        "crypto": require.resolve("crypto-browserify"),
+        "stream": require.resolve("stream-browserify"),
+        // "assert": require.resolve("assert")
+      }
+    )
+
+    if (!config.plugins) config.plugins = []
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify("prod"),
+      })
+    )
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      }));
+
+    return config;
+  }
+};

examples/web-chat/package.json

@@ -22,19 +22,18 @@
     "@types/node": "^17.0.8",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "cra-webpack-rewired": "^1.0.1",
     "cspell": "^5.14.0",
     "gh-pages": "^3.2.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
-    "react-app-rewired": "^2.1.11",
     "react-scripts": "5.0.0",
     "typescript": "^4.5.4"
   },
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "cra-webpack-rewired start",
-    "build": "react-app-rewired build",
+    "build": "cra-webpack-rewired build",
-    "test:unit": "react-app-rewired test",
+    "test:unit": "cra-webpack-rewired test",
-    "eject": "react-app-rewired eject",
     "fix": "run-s fix:*",
     "test": "run-s build test:*",
     "test:lint": "eslint src --ext .ts --ext .tsx",