Merge pull request #228 from Fraunhofer-AISEC/major_dependency_update

Major Dependencies Update

.github/workflows/frontend-codestyle.yml

@@ -20,7 +20,7 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
         cache: 'yarn'
         cache-dependency-path: 'frontend/yarn.lock'
     - name: Install Validation Dependencies

.github/workflows/frontend-deploy.yml

@@ -15,7 +15,7 @@ jobs:
         persist-credentials: false
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
         cache: 'yarn'
         cache-dependency-path: 'frontend/yarn.lock'
     - name: Install Validation Dependencies

frontend/.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.0.cjs

frontend/config-overrides.js

@@ -1,12 +1,24 @@
 const CopyPlugin = require('copy-webpack-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 module.exports = function override(config) {
-  config.plugins.push(new CopyPlugin({
+  const overridden = config;
+
+  // These are required by sql.js for the build to succeed. However, we do not use the corresponding
+  // functionality of sql.js, hence we can provide empty modules.
+  overridden.resolve.fallback = {
+    fs: false, path: false, crypto: false,
+  };
+  overridden.plugins.push(new CopyPlugin({
     patterns: [
       // This wasm file will be fetched dynamically when we initialize sql.js
       // It is important that we do not change its name, and that it is in the same folder as the js
       { from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'static/js/' },
     ],
   }));
-  return config;
+
+  // These are required by csv-stringify
+  overridden.plugins.push(new NodePolyfillPlugin({ includeAliases: ['Buffer', 'process', 'stream'] }));
+
+  return overridden;
 };

frontend/package.json

@@ -4,32 +4,32 @@
   "private": true,
   "homepage": "https://www.pqdb.info/",
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/material": "^5.8.1",
-    "@mui/styles": "^5.8.0",
-    "copy-webpack-plugin": "^6.4.1",
-    "csv-stringify": "^5.6.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.5",
+    "@mui/styles": "^5.13.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "csv-stringify": "^6.4.0",
     "md5": "^2.3.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-image-magnifiers": "^1.4.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "sql.js": "^1.6.2"
+    "react-router-dom": "6.13.0",
+    "react-scripts": "^5.0.1",
+    "sql.js": "^1.8.0"
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint": "^8.43.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "react-app-rewired": "^2.2.1",
-    "typescript": "^4.7.2"
+    "typescript": "^5.1.3"
   },
   "scripts": {
     "start": "HOST=localhost react-app-rewired start",
@@ -51,5 +51,5 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@3.2.1"
+  "packageManager": "yarn@3.6.0"
 }