[MDS-5383] Minespace & Common package Webpack upgrades

.github/workflows/minespace.unit.yaml

@@ -26,24 +26,23 @@ jobs:
           node-version: 14.x
 
       - name: Install Dependencies
-        run: yarn
+        run: yarn install
 
       - name: Build Common Package
-        run: cd services/common/ && yarn build
+        run: yarn workspace @mds/common build
 
       - name: Run minespace tests
-        run: cd services/minespace-web/ && yarn && yarn test
+        run: yarn workspace @mds/minespace-web test
 
       - name: build-minespace-web
         run: |
-          cd services/minespace-web/
-          NODE_OPTIONS=--max-old-space-size=8096 yarn build
-
-      - name: start-minespace-web        
-        run: cd services/minespace-web/ && yarn run http-server-spa build /index.html 3020 &
-
-      - name: Run cypress tests        
-        run: cd services/minespace-web/ && yarn cypress run
+          NODE_OPTIONS=--max-old-space-size=5024 yarn workspace @mds/minespace-web build
+
+      - name: start-minespace-web
+        run: yarn workspace @mds/minespace-web run http-server-spa build /index.html 3020 &
+
+      - name: Run cypress tests
+        run: yarn workspace @mds/minespace-web cypress run
         env:
           CYPRESS_TEST_USER: ${{ secrets.CYPRESS_TEST_USER }}
           CYPRESS_TEST_PASSWORD: ${{ secrets.CYPRESS_TEST_PASSWORD }}
@@ -58,3 +57,10 @@ jobs:
           CYPRESS_KEYCLOAK_CLIENT_ID: ${{ secrets.CYPRESS_KEYCLOAK_CLIENT_ID }}
           CYPRESS_KEYCLOAK_IDP_HINT: ${{ secrets.CYPRESS_KEYCLOAK_IDP_HINT }}
           CYPRESS_KEYCLOAK_RESOURCE: ${{ secrets.CYPRESS_KEYCLOAK_RESOURCE }}
+
+      - name: Upload cypress video
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: cypress-recording
+          path: services/core-web/cypress/videos

services/common/package.json

@@ -8,7 +8,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "webpack --env production",
-    "watch": "webpack --watch --watch-poll --hot --env development"
+    "watch": "webpack --watch --env development"
   },
   "dependencies": {
     "@babel/runtime": "7.15.3",
@@ -28,23 +28,23 @@
     "babel-loader": "8.2.2",
     "babel-plugin-import": "1.13.3",
     "babel-preset-stage-2": "6.24.1",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "5.1.1",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "10.1.0",
     "hard-source-webpack-plugin": "0.13.1",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "5.5.3",
     "image-webpack-loader": "8.1.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "postcss-loader": "3.0.0",
+    "mini-css-extract-plugin": "2.7.6",
+    "postcss-loader": "7.3.3",
     "prettier": "1.19.1",
     "react-hot-loader": "4.12.21",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.3.0",
+    "style-loader": "3.3.3",
+    "terser-webpack-plugin": "5.3.9",
     "typescript": "4.7.4",
-    "webpack": "4.41.5",
-    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0",
-    "webpack-manifest-plugin": "2.2.0",
-    "webpack-merge": "4.2.2",
-    "webpack-node-externals": "^3.0.0"
+    "webpack": "5.88.1",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-manifest-plugin": "5.0.0",
+    "webpack-merge": "5.9.0",
+    "webpack-node-externals": "3.0.0"
   }
 }

services/common/webpack.config.ts

@@ -5,43 +5,47 @@ const pkg = require("./package.json");
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const nodeExternals = require("webpack-node-externals");
 
-module.exports = (mode) => {
+module.exports = (opts) => {
+  const mode = opts.development ? "development" : "production";
   console.log(`\n============= Webpack Mode : ${mode} =============\n`);
   return {
     mode,
     entry: "./src/index.ts",
     output: {
       path: path.resolve(__dirname, "dist"),
       filename: "index.js",
-      library: pkg.name,
       libraryTarget: "commonjs2",
     },
     resolve: {
       extensions: [".js", ".jsx", ".ts", ".tsx"],
     },
+    watchOptions: {
+      // Increase file change poll interval to reduce
+      // CPU usage on some operating systems.
+      poll: 2500,
+      ignored: /node_modules/,
+    },
     module: {
       rules: [
         {
-          test: /\.(ts|tsx)$/,
+          test: /\.[[t]sx?$/,
           exclude: /node_modules/,
-          use: [
-            {
-              loader: "babel-loader",
-            },
-            {
-              loader: "ts-loader",
-              options: {
-                configFile: "tsconfig.json",
-                transpileOnly: false,
-              },
-            },
-          ],
+          loader: "esbuild-loader",
+          options: {
+            target: "es2015",
+            tsconfig: "./tsconfig.json",
+            minify: false,
+          },
         },
         {
-          test: /\.(js|jsx)$/,
+          test: /\.[[j]sx?$/,
           exclude: /node_modules/,
-          use: {
-            loader: "babel-loader",
+          loader: "esbuild-loader",
+          options: {
+            /// Treat .js files as `.jsx` files
+            loader: "jsx",
+            target: "es2015",
+            minify: false,
           },
         },
         {

services/core-web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.8.0
+FROM node:14.21.3
 
 # Create working directory
 RUN mkdir /app

services/core-web/package.json

@@ -167,7 +167,7 @@
     "jest-sonar-reporter": "2.0.0"
   },
   "scripts": {
-    "serve": "cross-env HOST=0.0.0.0 PORT=3000 webpack-dev-server --watch --hot --env development",
+    "serve": "cross-env HOST=0.0.0.0 PORT=3000 webpack-dev-server --hot --env development",
     "vfs": "webpack configtest ./webpack.config.ts",
     "build": "webpack --env production",
     "ci-test": "cross-env CI=true jest --env=jsdom --testResultsProcessor=jest-sonar-reporter --update-snapshot --runInBand --coverage",

services/minespace-web/.env-example

@@ -2,7 +2,7 @@ API_URL=http://localhost:5000
 DOCUMENT_MANAGER_URL=http://localhost:5001
 FILESYSTEM_PROVIDER_URL=http://localhost:62870/file-api/AmazonS3Provider/
 MATOMO_URL=http://localhost:5001
-NODE_ENV=production
+NODE_ENV=development
 
 KEYCLOAK_CLIENT_ID=mines-digital-services-mds-public-client-4414
 KEYCLOAK_RESOURCE=mines-digital-services-mds-public-client-4414

services/minespace-web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.8.0
+FROM node:14.21.3
 
 # Create working directory
 RUN mkdir /app

services/minespace-web/Dockerfile.ci

@@ -1,4 +1,4 @@
-FROM node:14.8.0 as builder
+FROM node:14.21.3 as builder
 
 # Create working directory
 RUN mkdir /app
@@ -7,7 +7,7 @@ WORKDIR /app
 # Install app dependencies
 COPY . .
 
-ENV NODE_OPTIONS="--max-old-space-size=4096"
+ENV NODE_OPTIONS="--max-old-space-size=6144"
 
 # Install Dependencies
 RUN yarn

services/minespace-web/cypress.config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   chromeWebSecurity: false,
   viewportWidth: 1960,
   viewportHeight: 1080,
+  videoUploadOnPasses: false,
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.

services/minespace-web/package.json

@@ -73,8 +73,8 @@
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "0.13.3",
     "reselect": "4.0.0",
-    "sass": "1.56.0",
-    "sass-loader": "10.0.2",
+    "sass": "1.63.6",
+    "sass-loader": "13.3.2",
     "tus-js-client": "1.8.0"
   },
   "devDependencies": {
@@ -89,19 +89,19 @@
     "@types/redux-form": "8.2.6",
     "@types/styled-components": "5.1.26",
     "acorn": "6.4.1",
-    "autoprefixer": "9.7.4",
+    "autoprefixer": "10.4.14",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",
     "babel-loader": "8.2.2",
     "babel-plugin-import": "1.13.3",
     "babel-preset-stage-2": "6.24.1",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "5.1.1",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "10.1.0",
     "cross-env": "5.2.1",
-    "css-loader": "3.4.2",
-    "cssnano": "4.1.10",
+    "css-loader": "6.8.1",
+    "cssnano": "6.0.1",
     "cypress": "12.13.0",
-    "eslint": "6.8.0",
+    "esbuild-loader": "3.0.1",
     "eslint-config-airbnb": "17.1.1",
     "eslint-config-prettier": "6.9.0",
     "eslint-import-resolver-alias": "1.1.2",
@@ -110,30 +110,31 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "file-loader": "4.3.0",
+    "fsevents": "2.3.2",
     "hard-source-webpack-plugin": "0.13.1",
-    "html-webpack-plugin": "3.2.0",
     "http-server-spa": "1.3.0",
-    "image-webpack-loader": "8.1.0",
     "jest": "24.8.0",
-    "less": "3.5.0",
-    "less-loader": "6.2.0",
-    "mini-css-extract-plugin": "0.7.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "postcss-loader": "3.0.0",
+    "less": "4.1.3",
+    "less-loader": "11.1.3",
+    "mini-css-extract-plugin": "2.7.6",
+    "optimize-css-assets-webpack-plugin": "6.0.1",
+    "postcss-loader": "7.3.3",
     "prettier": "1.19.1",
     "react-hot-loader": "4.12.21",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.3.0",
-    "thread-loader": "2.1.3",
+    "speed-measure-webpack-plugin": "1.5.0",
+    "style-loader": "3.3.3",
+    "terser-webpack-plugin": "5.3.9",
+    "thread-loader": "4.0.2",
     "ts-jest": "24.3.0",
     "ts-loader": "8.4.0",
+    "ts-node": "10.9.1",
     "typescript": "4.7.4",
     "url-loader": "2.3.0",
-    "webpack": "4.41.5",
-    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0",
-    "webpack-manifest-plugin": "2.2.0",
-    "webpack-merge": "4.2.2"
+    "webpack": "5.88.1",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-manifest-plugin": "5.0.0",
+    "webpack-merge": "5.9.0"
   },
   "optionalDependencies": {
     "enzyme-adapter-react-16": "1.14.0",
@@ -145,9 +146,10 @@
     "jest-sonar-reporter": "2.0.0"
   },
   "scripts": {
-    "serve": "cross-env HOST=0.0.0.0 PORT=3020 webpack-dev-server --watch --watch-poll --hot --env development",
+    "serve": "cross-env HOST=0.0.0.0 PORT=3020 webpack-dev-server --hot --env development",
     "build": "webpack --env production",
     "production": "node server.js",
+    "verify": "webpack --env production configtest webpack.config.ts",
     "ci-test": "CI=true jest --env=jsdom --testResultsProcessor=jest-sonar-reporter --update-snapshot --runInBand --coverage",
     "lint": "eslint ./src",
     "lint:file": "eslint",