CONSOLE-3905: (deps) upgrade to webpack 5.95

frontend/package.json

@@ -176,7 +176,7 @@
     "d3": "^5.16.0",
     "file-saver": "1.3.x",
     "focus-trap-react": "^6.0.0",
-    "formik": "2.0.3",
+    "formik": "^2.1.5",
     "fuzzysearch": "1.0.x",
     "gherkin-lint": "^4.1.3",
     "git-url-parse": "^11.4.0",
@@ -277,15 +277,13 @@
     "@types/react-virtualized": "9.x",
     "@types/semver": "^6.0.0",
     "@types/showdown": "1.9.4",
-    "@types/webpack": "4.x",
-    "@types/webpack-dev-server": "^4.7.2",
+    "@types/webpack": "5.x",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "acorn": "^7.0.0",
     "acorn-jsx": "5.2.0",
     "babel-loader": "^8.2.1",
     "babel-plugin-transform-imports": "1.5.1",
     "browser-env": "3.x",
-    "cache-loader": "^4.1.0",
     "chalk": "2.4.x",
     "circular-dependency-plugin": "5.x",
     "comment-json": "4.x",
@@ -300,11 +298,11 @@
     "enzyme": "3.10.x",
     "file-loader": "6.2.0",
     "find-up": "4.x",
-    "fork-ts-checker-webpack-plugin": "6.5.3",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "glob": "7.x",
     "glslify-loader": "^2.0.0",
     "graphql-tag": "^2.10.3",
-    "html-webpack-plugin": "4.5.2",
+    "html-webpack-plugin": "5.6.0",
     "html-webpack-skip-assets-plugin": "^1.0.4",
     "husky": "^8.0.3",
     "i18next-parser": "^8.9.0",
@@ -316,7 +314,7 @@
     "jest-resolve": "^26.4.0",
     "jest-transform-graphql": "^2.1.0",
     "lint-staged": "^10.2.2",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.9.1",
     "minimist": "1.2.5",
     "mocha-junit-reporter": "^1.23.3",
     "mochawesome": "^6.1.1",
@@ -325,7 +323,6 @@
     "mock-socket": "^9.0.3",
     "monaco-editor": "^0.28.1",
     "monaco-editor-webpack-plugin": "^4.2.0",
-    "null-loader": "^4.0.1",
     "prettier": "2.0.5",
     "react-refresh": "^0.10.0",
     "read-pkg": "5.x",
@@ -340,10 +337,10 @@
     "ts-node": "10.9.2",
     "typescript": "4.5.5",
     "umd-compat-loader": "^2.1.2",
-    "webpack": "^4.47.0",
+    "webpack": "^5.95.0",
     "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.15.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
     "webpack-virtual-modules": "^0.6.2"
   },
   "engines": {

frontend/packages/console-plugin-sdk/src/webpack/ConsoleActivePluginsModule.ts

@@ -73,17 +73,17 @@ export class ConsoleActivePluginsModule {
       }
     };
 
-    const addFilesToCompilation = (compilation: webpack.compilation.Compilation) => {
+    const addFilesToCompilation = (compilation: webpack.Compilation) => {
       this.pluginPackages.forEach((pkg) => {
         getPluginFiles(pkg).forEach((f) => {
           compilation.fileDependencies.add(f);
         });
       });
     };
 
-    const addErrorsToCompilation = (compilation: webpack.compilation.Compilation) => {
+    const addErrorsToCompilation = (compilation: webpack.Compilation) => {
       errors.forEach((e) => {
-        compilation.errors.push(new Error(e));
+        compilation.errors.push(new webpack.WebpackError(e));
       });
     };
 

frontend/packages/console-shared/src/test-utils/formik-props-utils.ts

@@ -13,6 +13,7 @@ export const formikFormProps: FormikProps<FormikValues> = {
   handleReset: jest.fn(),
   handleSubmit: jest.fn(),
   getFieldProps: jest.fn(),
+  getFieldHelpers: jest.fn(),
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   initialErrors: {},

frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx

@@ -58,6 +58,7 @@ describe('Project Access Form', () => {
       status: {},
       submitCount: 0,
       dirty: false,
+      getFieldHelpers: jest.fn(),
       getFieldProps: jest.fn(),
       handleBlur: jest.fn(),
       handleChange: jest.fn(),

frontend/public/components/utils/file-input.tsx

@@ -6,7 +6,7 @@ import { ConnectDropTarget, DropTargetMonitor } from 'react-dnd/lib/interfaces';
 import { Alert } from '@patternfly/react-core';
 /* eslint-disable-next-line */
 import { withTranslation, WithTranslation } from 'react-i18next';
-import { isBinary } from 'istextorbinary/edition-es2017/index';
+import { isBinary } from 'istextorbinary';
 
 import withDragDropContext from './drag-drop-context';
 
@@ -47,7 +47,11 @@ class FileInputWithTranslation extends React.Component<FileInputProps, FileInput
         ? (reader.result as string).split(',')[1]
         : (reader.result as string);
       // OnLoad, if inputFileIsBinary we have read as a binary string, skip next block
-      if (containsNonPrintableCharacters(input) && isBinary(null, input) && !fileIsBinary) {
+      if (
+        containsNonPrintableCharacters(input) &&
+        isBinary(null, reader.result as Buffer) &&
+        !fileIsBinary
+      ) {
         fileIsBinary = true;
         reader.readAsDataURL(file);
       } else {
@@ -180,7 +184,7 @@ const DroppableFileInputWithTranslation = withDragDropContext(
         inputFileIsBinary:
           this.props.inputFileIsBinary ||
           (containsNonPrintableCharacters(this.props.inputFileData) &&
-            isBinary(null, this.props.inputFileData)),
+            isBinary(null, (this.props.inputFileData as unknown) as Buffer)),
       };
       this.handleFileDrop = this.handleFileDrop.bind(this);
       this.onDataChange = this.onDataChange.bind(this);
@@ -204,7 +208,11 @@ const DroppableFileInputWithTranslation = withDragDropContext(
       reader.onload = () => {
         const input = reader.result as string; // Note(Yaacov): we use reader.readAsText
         // OnLoad, if inputFileIsBinary we have read as a binary string, skip next block
-        if (containsNonPrintableCharacters(input) && isBinary(null, input) && !inputFileIsBinary) {
+        if (
+          containsNonPrintableCharacters(input) &&
+          isBinary(null, reader.result as Buffer) &&
+          !inputFileIsBinary
+        ) {
           inputFileIsBinary = true;
           reader.readAsBinaryString(file);
         } else {

frontend/webpack.circular-deps.ts

@@ -78,12 +78,12 @@ const getCycleEntries = (cycles: DetectedCycle[]): string => {
 const applyThresholds = (
   cycles: DetectedCycle[],
   thresholds: PresetOptions['thresholds'],
-  compilation: webpack.compilation.Compilation,
+  compilation: webpack.Compilation,
 ) => {
   const totalCycles = cycles.length;
   if (thresholds.totalCycles && totalCycles > thresholds.totalCycles) {
     compilation.errors.push(
-      new Error(
+      new webpack.WebpackError(
         `${HandleCyclesPluginName}: total cycles (${totalCycles}) exceeds threshold (${thresholds.totalCycles})`,
       ),
     );
@@ -92,17 +92,21 @@ const applyThresholds = (
   const minLengthCycles = minLengthCycleCount(cycles);
   if (thresholds.minLengthCycles && minLengthCycles > thresholds.minLengthCycles) {
     compilation.errors.push(
-      new Error(
+      new webpack.WebpackError(
         `${HandleCyclesPluginName}: min-length cycles (${minLengthCycles}) exceeds threshold (${thresholds.minLengthCycles})`,
       ),
     );
   }
 };
 
+declare type webpackPlugin =
+  | ((this: webpack.Compiler, compiler: webpack.Compiler) => void)
+  | webpack.WebpackPluginInstance;
+
 export class CircularDependencyPreset {
   constructor(private readonly options: PresetOptions) {}
 
-  apply(plugins: webpack.Plugin[]): void {
+  apply(plugins: (false | '' | 0 | webpackPlugin)[]): void {
     const cycles: DetectedCycle[] = [];
 
     plugins.push(

frontend/webpack.config.ts

@@ -5,7 +5,7 @@ import * as _ from 'lodash';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
-import * as _crypto from 'crypto';
+import * as glob from 'glob';
 
 import { HtmlWebpackSkipAssetsPlugin } from 'html-webpack-skip-assets-plugin';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
@@ -33,20 +33,9 @@ const REACT_REFRESH = process.env.REACT_REFRESH;
 const OPENSHIFT_CI = process.env.OPENSHIFT_CI;
 const WDS_PORT = 8080;
 
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = _crypto.createHash;
-Object.assign(_crypto, {
-  createHash: (): _crypto.Hash => hash('sha256'),
-});
-
 /* Helpers */
 const extractCSS = new MiniCssExtractPlugin({
-  filename:
-    NODE_ENV === 'production'
-      ? 'app-bundle.[name].[contenthash].css'
-      : 'app-bundle.[name].[hash].css',
+  filename: 'app-bundle.[name].[contenthash].css',
   // We follow BEM naming to scope CSS.
   // See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
   ignoreOrder: true,
@@ -58,6 +47,17 @@ const getVendorModuleRegExp = (vendorModules: string[]) =>
 
 const overpassTest = /overpass-.*\.(woff2?|ttf|eot|otf)(\?.*$|$)/;
 
+// Resolve to an empty module for overpass fonts included in SASS files.
+const overpassFiles = glob
+  .sync('./node_modules/@patternfly*/**/overpass*.{woff,woff2}', {
+    absolute: true,
+    noglobstar: false,
+  })
+  .reduce((acc, file) => {
+    acc[file] = false;
+    return acc;
+  }, {});
+
 const sharedPluginModulesTest = getVendorModuleRegExp(
   // Map shared module names to actual webpack modules as per shared-modules-init.ts
   sharedPluginModules.map((moduleName) => {
@@ -82,6 +82,12 @@ const config: Configuration = {
     main: ['./public/components/app.jsx', 'monaco-editor/esm/vs/editor/editor.worker.js'],
     'vendor-patternfly-4-shared': './public/vendor-patternfly-4-shared.scss',
   },
+  performance: {
+    hints: false, // TODO: examine ways to decrease build artifact size so this can be removed
+  },
+  cache: {
+    type: 'filesystem',
+  },
   output: {
     path: path.resolve(__dirname, 'public/dist'),
     publicPath: 'static/',
@@ -96,26 +102,54 @@ const config: Configuration = {
     devMiddleware: {
       writeToDisk: true,
     },
+    watchFiles: [],
+  },
+  watchOptions: {
+    // needed to prevent ENOSPC: System limit for number of file watchers reached error
+    ignored: /node_modules/,
   },
   resolve: {
     extensions: ['.glsl', '.ts', '.tsx', '.js', '.jsx'],
+    fallback: {
+      fs: false,
+      // eslint-disable-next-line camelcase
+      child_process: false,
+      crypto: false,
+      module: false,
+      net: false,
+      os: false,
+      path: false,
+      stream: false,
+      timers: false,
+      tty: false,
+    },
+    alias: {
+      prettier: false,
+      'prettier/parser-yaml': false,
+      ...overpassFiles,
+    },
   },
   node: {
-    fs: 'empty',
-    // eslint-disable-next-line camelcase
-    child_process: 'empty',
-    net: 'empty',
-    crypto: 'empty',
-    module: 'empty',
+    global: true, // see https://github.com/browserify/randombytes/issues/36
+    __filename: false,
+    __dirname: false,
   },
   module: {
     rules: [
+      // TODO: update react-dnd and remove this rule
+      // https://github.com/react-dnd/react-dnd/issues/3418
+      {
+        test: /\.m?js$/,
+        resolve: {
+          fullySpecified: false, // disable the behaviour
+        },
+      },
       {
         // Disable tree shaking on modules shared with Console dynamic plugins
         test: sharedPluginModulesTest,
         sideEffects: true,
       },
-      { test: /\.glsl$/, loader: 'raw!glslify' },
+      { test: /\.glsl$/, use: ['raw-loader', 'glslify-loader'] },
       {
         test: /\.js$/,
         include: /node_modules\/@patternfly-4\//,
@@ -139,7 +173,6 @@ const config: Configuration = {
         test: /(\.jsx?)|(\.tsx?)$/,
         exclude: /node_modules\/(?!(bitbucket|ky|ini)\/)/,
         use: [
-          { loader: 'cache-loader' },
           // Disable thread-loader in CI
           ...(!OPENSHIFT_CI
             ? [
@@ -173,14 +206,6 @@ const config: Configuration = {
         test: /node_modules[\\\\|/](yaml-language-server)/,
         loader: 'umd-compat-loader',
       },
-      {
-        test: /prettier\/parser-yaml/,
-        loader: 'null-loader',
-      },
-      {
-        test: /prettier/,
-        loader: 'null-loader',
-      },
       {
         test: /node_modules[\\\\|/](vscode-json-languageservice)/,
         loader: 'umd-compat-loader',
@@ -195,7 +220,6 @@ const config: Configuration = {
               publicPath: './',
             },
           },
-          { loader: 'cache-loader' },
           ...(!OPENSHIFT_CI ? [{ loader: 'thread-loader' }] : []),
           {
             loader: 'css-loader',
@@ -235,13 +259,6 @@ const config: Configuration = {
           esModule: false,
         },
       },
-      {
-        // Resolve to an empty module for overpass fonts included in SASS files.
-        // This way file-loader won't parse them. Make sure this is BELOW the
-        // file-loader rule.
-        test: overpassTest,
-        loader: 'null-loader',
-      },
       {
         test: /\.(graphql|gql)$/,
         exclude: /node_modules/,
@@ -268,9 +285,13 @@ const config: Configuration = {
           test: /@patternfly-4\//,
         },
         'vendor-plugins-shared': {
-          test: ({ resource = '' }) =>
-            sharedPluginModulesTest.test(resource) &&
-            !resource.includes('/node_modules/@patternfly'),
+          test(module: { resource?: string }) {
+            return (
+              module.resource &&
+              sharedPluginModulesTest.test(module.resource) &&
+              !module.resource.includes('/node_modules/@patternfly')
+            );
+          },
         },
       },
     },
@@ -394,7 +415,7 @@ if (ANALYZE_BUNDLE === 'true') {
 /* Production settings */
 if (NODE_ENV === 'production') {
   config.devtool = 'source-map';
-  config.output.filename = '[name]-bundle-[hash].min.js';
+  config.output.filename = '[name]-bundle-[chunkhash].min.js';
   config.output.chunkFilename = '[name]-chunk-[chunkhash].min.js';
   // Causes error in --mode=production due to scope hoisting
   config.optimization.concatenateModules = false;