Updated react-scripts to version 5 (webpack 5)

Author: Anton Mogdalov

config-overrides.js

@@ -0,0 +1,31 @@
+const webpack = require("webpack")
+const path = require("path")
+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"),
+    vm: require.resolve("vm-browserify"),
+  })
+  config.resolve.fallback = fallback
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ])
+  const modules = config.resolve.modules
+  config.resolve.modules = [...modules, path.resolve(__dirname, "src")]
+  config.module.rules.push({
+    test: /\.m?js/,
+    resolve: {
+      fullySpecified: false,
+    },
+  })
+  return config
+}

package.json

@@ -3,10 +3,10 @@
   "version": "8.2.2",
   "private": true,
   "scripts": {
-    "build": "cross-env REACT_APP_BACKEND=true cross-env PUBLIC_URL='./' react-scripts --openssl-legacy-provider build",
-    "start": "react-scripts --openssl-legacy-provider start",
-    "start:backend": "cross-env REACT_APP_BACKEND=true react-scripts --openssl-legacy-provider start",
-    "test": "react-scripts --openssl-legacy-provider test"
+    "build": "cross-env REACT_APP_BACKEND=true cross-env PUBLIC_URL='./' react-app-rewired --openssl-legacy-provider build",
+    "start": "react-app-rewired --openssl-legacy-provider start",
+    "start:backend": "cross-env REACT_APP_BACKEND=true react-app-rewired --openssl-legacy-provider start",
+    "test": "react-app-rewired --openssl-legacy-provider test"
   },
   "browserslist": [
     ">0.2%",
@@ -28,11 +28,15 @@
     "@fullcalendar/timegrid": "5.11.0",
     "animate.css": "4.1.1",
     "apexcharts": "^3.40.0",
+    "assert": "^2.1.0",
     "awesome-bootstrap-checkbox": "https://github.com/flatlogic/awesome-bootstrap-checkbox#bump-to-bootstrap5",
     "axios": "^0.27.2",
     "bootstrap": "5.2.3",
+    "bootstrap-icons": "^1.11.3",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.2",
     "connected-react-router": "6.9.3",
+    "crypto-browserify": "^3.12.0",
     "draft-js": "^0.11.7",
     "echarts": "^4.9.0",
     "echarts-for-react": "^2.0.16",
@@ -44,13 +48,16 @@
     "highcharts": "^10.3.3",
     "highcharts-react-official": "^3.2.0",
     "history": "^4.10.1",
+    "https-browserify": "^1.0.0",
     "jasny-bootstrap": "^4.0.0",
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "^1.3.0",
     "md5": "^2.3.0",
     "messenger": "https://github.com/HubSpot/messenger.git",
     "moment": "^2.29.4",
     "nvd3": "1.8.6",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
     "rc-color-picker": "^1.2.6",
     "rc-hammerjs": "0.6.10",
     "rc-slider": "^9.7.5",
@@ -59,7 +66,9 @@
     "react-animated-number": "^0.4.4",
     "react-apexcharts": "^1.4.0",
     "react-app-polyfill": "^0.2.2",
+    "react-app-rewired": "^2.2.1",
     "react-autosize-textarea": "^5.0.1",
+    "react-bootstrap-icons": "^1.11.4",
     "react-bootstrap-table": "4.3.1",
     "react-bootstrap-table-next": "^3.3.5",
     "react-bootstrap-table2-paginator": "^2.1.2",
@@ -77,6 +86,7 @@
     "react-router": "5.3.3",
     "react-router-dom": "5.3.3",
     "react-router-hash-link": "^2.4.3",
+    "react-scripts": "^5.0.1",
     "react-scrollspy": "^3.4.3",
     "react-select": "^3.2.0",
     "react-shuffle": "2.1.0",
@@ -95,17 +105,18 @@
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.1",
     "rickshaw": "1.7.1",
-    "react-scripts": "^3.4.4",
     "sass": "^1.69.5",
     "sass-loader": "^10",
     "showdown": "^1.9.1",
     "skycons": "^1.0.0",
     "sortablejs": "1.15.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "styled-components": "^5.3.10",
+    "url": "^0.11.4",
     "uuid": "^8.3.2",
-    "yup": "^0.32.11",
-    "react-bootstrap-icons": "^1.11.4",
-    "bootstrap-icons": "^1.11.3"
+    "vm-browserify": "^1.1.2",
+    "yup": "^0.32.11"
   },
   "engines": {
     "node": "^20.15"

src/pages/tables/dynamic/Dynamic.js

@@ -11,7 +11,7 @@ import {
 import classnames from 'classnames';
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
-import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit"
 
 import ReactTable from 'react-table';