Merge pull request #9649 from owncloud/bump-ipd-webpack

bump idp webpack to 5

services/idp/license-checker-clarifications.json

@@ -1,5 +1,5 @@
 {
-    "i18next-conv@14.0.0": {
+    "i18next-conv@14.1.0": {
         "licenses": "MIT",
         "licenseFile": "LICENSE.md",
         "licenseStart": "# MIT License",

services/idp/package.json

@@ -71,38 +71,38 @@
     ]
   },
   "dependencies": {
-    "@fontsource/roboto": "^5.0.8",
+    "@fontsource/roboto": "^5.0.13",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
-    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.5",
-    "@types/node": "^20.5.9",
-    "@types/react": "^17.0.65",
-    "@types/react-dom": "^17.0.20",
-    "@types/react-redux": "^7.1.26",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.11",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.25",
+    "@types/react-redux": "^7.1.33",
     "@types/redux-logger": "^3.0.13",
-    "axios": "^1.6.1",
-    "classnames": "^2.3.2",
-    "i18next": "^23.6.0",
-    "i18next-browser-languagedetector": "^7.1.0",
-    "i18next-http-backend": "^2.2.2",
-    "i18next-resources-to-backend": "^1.1.4",
-    "kpop": "https://download.kopano.io/community/kapp:/kpop-2.2.0.tgz",
-    "query-string": "^8.1.0",
+    "axios": "^1.7.2",
+    "classnames": "^2.5.1",
+    "i18next": "^23.12.1",
+    "i18next-browser-languagedetector": "^7.2.1",
+    "i18next-http-backend": "^2.5.2",
+    "i18next-resources-to-backend": "^1.2.1",
+    "kpop": "https://download.kopano.io/community/kapp:/kpop-2.7.2.tgz",
+    "query-string": "^8.2.0",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.2",
-    "react-i18next": "^14.1.1",
-    "react-redux": "^8.1.2",
+    "react-i18next": "^14.1.3",
+    "react-redux": "^8.1.3",
     "react-router": "^5.3.4",
     "react-router-dom": "5.2.1",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "render-if": "^0.1.1",
-    "web-vitals": "^3.5.0"
+    "web-vitals": "^3.5.2"
   },
   "devDependencies": {
     "@babel/core": "7.22.11",
@@ -115,28 +115,28 @@
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "cldr": "^7.5.0",
     "css-loader": "5.2.7",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "dotenv": "16.3.1",
     "dotenv-expand": "10.0.0",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-flowtype": "^5.10.0",
-    "eslint-plugin-i18next": "^6.0.3",
+    "eslint-plugin-i18next": "^6.0.9",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^24.7.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "^3.10.2",
     "eslint-webpack-plugin": "^2.7.0",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "4.5.2",
-    "i18next-conv": "^14.0.0",
-    "i18next-parser": "^8.7.0",
+    "i18next-conv": "^14.1.0",
+    "i18next-parser": "^8.13.0",
     "jest": "29.7.0",
     "license-checker-rseidelsohn": "^4.3.0",
     "mini-css-extract-plugin": "1.6.2",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
     "pnp-webpack-plugin": "1.7.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "4.3.0",
@@ -146,11 +146,11 @@
     "react-dev-utils": "^12.0.1",
     "resolve": "1.22.8",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^10.4.1",
+    "sass-loader": "^10.5.2",
     "source-map-explorer": "^2.5.3",
     "typescript": "^4.9.5",
     "url-loader": "4.1.1",
-    "webpack": "4.47.0",
+    "webpack": "5.93.0",
     "webpack-manifest-plugin": "4.1.1",
     "workbox-webpack-plugin": "7.0.0"
   },

services/idp/ui_config/webpack.config.js

@@ -10,8 +10,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
+const CSSMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
@@ -172,8 +171,6 @@ module.exports = function(webpackEnv) {
       filename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].js'
         : isEnvDevelopment && 'static/js/bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].chunk.js'
@@ -189,9 +186,6 @@ module.exports = function(webpackEnv) {
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple Webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
       // this defaults to 'window', but by setting it to 'this' then
       // module chunks which are built will work in web workers as well.
       globalObject: 'this',
@@ -238,27 +232,9 @@ module.exports = function(webpackEnv) {
               ascii_only: true,
             },
           },
-          sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-          cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
-        }),
+        new CSSMinimizerPlugin(),
       ],
       // Automatically split vendor and commons
       // https://twitter.com/wSokra/status/969633336732905474
@@ -324,9 +300,6 @@ module.exports = function(webpackEnv) {
     module: {
       strictExportPresence: true,
       rules: [
-        // Disable require.ensure as it's not a standard language feature.
-        { parser: { requireEnsure: false } },
-
         // First, run the linter.
         // It's important to do this before Babel processes the JS.
         {
@@ -596,12 +569,6 @@ module.exports = function(webpackEnv) {
           };
         },
       }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the Webpack build.
       isEnvProduction &&
@@ -651,18 +618,6 @@ module.exports = function(webpackEnv) {
           },
         }),
     ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,