webpack upgrade

package.json

@@ -5,7 +5,7 @@
   "description": "Reverse proxy frontend application",
   "scripts": {
     "start": "run-p start:dev",
-    "start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
+    "start:dev": "webpack serve --config webpack.config.dev.js --port 3000",
     "clean:build": "rimraf ./build && mkdir build",
     "prebuild": "run-p clean:build",
     "build": "webpack --config webpack.config.prod.js"
@@ -40,7 +40,7 @@
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.5",
     "babel-preset-react-app": "7.0.2",
-    "copy-webpack-plugin": "^6.0.1",
+    "copy-webpack-plugin": "^8.1.1",
     "css-loader": "2.1.1",
     "cssnano": "4.1.10",
     "eslint": "5.15.2",
@@ -48,21 +48,22 @@
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-react": "7.12.4",
     "fetch-mock": "7.3.1",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "5.3.1",
     "mini-css-extract-plugin": "0.5.0",
     "node-fetch": "^2.3.0",
     "npm-run-all": "4.1.5",
     "postcss-loader": "3.0.0",
+    "process": "^0.11.10",
     "react-test-renderer": "16.8.4",
     "react-testing-library": "6.0.0",
     "redux-immutable-state-invariant": "2.1.0",
     "redux-mock-store": "1.5.3",
     "rimraf": "2.6.3",
     "style-loader": "0.23.1",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.37.0",
+    "webpack-bundle-analyzer": "^4.4.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=8"

src/features/session/components/ForwardOptionsComponent.js

@@ -67,7 +67,10 @@ const ForwardOptionsComponent = ({ title, options }) => {
                 </StyledTableCell>
               </Tooltip>
               <StyledTableCell align="center">
-                <ActiveIcon active={options.pathOverwrite} loading={loading} />
+                <ActiveIcon
+                  active={options.pathOverwrite?.on}
+                  loading={loading}
+                />
               </StyledTableCell>
             </StyledTableRow>
           </TableBody>

webpack.config.dev.js

@@ -32,6 +32,9 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: "src/index.html",
       favicon: "src/favicon.ico"
+    }),
+    new webpack.ProvidePlugin({
+      process: "process/browser"
     })
   ],
   module: {