chore: bump all webpack related dependencies to latest

.storybook/main.js

@@ -88,7 +88,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
 
     if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) {
       // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged)
-      config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+      config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin');
     }
 
     return config;

package.json

@@ -134,13 +134,13 @@
     "@types/babel__traverse": "7.20.3",
     "@types/chrome-remote-interface": "0.30.0",
     "@types/circular-dependency-plugin": "5.0.5",
-    "@types/copy-webpack-plugin": "6.4.0",
+    "@types/copy-webpack-plugin": "10.1.0",
     "@types/dedent": "0.7.0",
     "@types/doctrine": "0.0.5",
     "@types/ejs": "3.1.2",
     "@types/enzyme": "3.10.7",
     "@types/eslint": "7.2.13",
-    "@types/express": "4.17.15",
+    "@types/express": "4.17.21",
     "@types/fs-extra": "8.0.1",
     "@types/glob": "7.1.1",
     "@types/graphviz": "0.0.34",
@@ -172,10 +172,10 @@
     "@types/semver": "^6.2.0",
     "@types/tmp": "0.2.0",
     "@types/vinyl": "2.0.7",
-    "@types/webpack-bundle-analyzer": "4.4.3",
-    "@types/webpack-dev-middleware": "4.1.0",
-    "@types/webpack-env": "1.16.0",
-    "@types/webpack-hot-middleware": "2.25.6",
+    "@types/webpack-bundle-analyzer": "4.7.0",
+    "@types/webpack-dev-middleware": "5.3.0",
+    "@types/webpack-env": "1.18.4",
+    "@types/webpack-hot-middleware": "2.25.9",
     "@types/yargs": "13.0.11",
     "@types/yargs-unparser": "2.0.1",
     "@typescript-eslint/eslint-plugin": "4.22.0",
@@ -200,7 +200,7 @@
     "clean-css": "4.2.3",
     "clean-webpack-plugin": "4.0.0",
     "connect-history-api-fallback": "1.6.0",
-    "copy-webpack-plugin": "8.1.0",
+    "copy-webpack-plugin": "12.0.2",
     "cross-env": "^5.1.4",
     "css-loader": "5.0.1",
     "cypress": "13.6.4",
@@ -230,12 +230,12 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.26.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "express": "4.17.3",
+    "express": "4.18.3",
     "extract-comments": "1.1.0",
     "file-loader": "6.2.0",
     "find-free-port": "2.0.0",
     "flamegrill": "0.2.0",
-    "fork-ts-checker-webpack-plugin": "6.1.0",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "fs-extra": "8.1.0",
     "geckodriver": "3.0.2",
     "glob": "7.2.0",
@@ -246,7 +246,7 @@
     "gulp-remember": "1.0.1",
     "gulp-sourcemaps": "2.6.5",
     "gulp-util": "3.0.8",
-    "html-webpack-plugin": "5.1.0",
+    "html-webpack-plugin": "5.6.0",
     "ignore-not-found-export-webpack-plugin": "1.0.2",
     "imports-loader": "1.2.0",
     "jest": "29.7.0",
@@ -262,7 +262,7 @@
     "jsonc-eslint-parser": "2.3.0",
     "just-scripts": "1.8.2",
     "lage": "1.8.8",
-    "license-webpack-plugin": "2.3.10",
+    "license-webpack-plugin": "4.0.2",
     "lint-staged": "10.2.10",
     "loader-utils": "2.0.4",
     "lodash": "4.17.21",
@@ -272,10 +272,8 @@
     "monosize": "0.3.0",
     "monosize-storage-azure": "0.0.8",
     "node-plop": "0.25.0",
-    "node-polyfill-webpack-plugin": "1.0.2",
     "nx": "17.3.2",
     "p-queue": "6.6.2",
-    "parallel-webpack": "2.6.0",
     "parse-diff": "0.7.1",
     "path-browserify": "1.0.1",
     "plop": "2.6.0",
@@ -324,26 +322,26 @@
     "swc-plugin-de-indent-template-literal": "1.0.0",
     "syncpack": "10.6.1",
     "tachometer": "0.7.0",
-    "terser": "5.27.2",
+    "terser": "5.28.1",
     "terser-webpack-plugin": "5.3.10",
     "through2": "4.0.2",
     "tmp": "0.2.1",
     "ts-jest": "29.1.1",
     "ts-loader": "9.3.1",
     "ts-node": "10.9.1",
-    "tsconfig-paths": "4.1.0",
-    "tsconfig-paths-webpack-plugin": "4.0.0",
+    "tsconfig-paths": "4.2.0",
+    "tsconfig-paths-webpack-plugin": "4.1.0",
     "tslib": "2.5.0",
     "typescript": "4.7.4",
     "vinyl": "2.2.0",
     "vrscreenshotdiff": "0.0.17",
-    "webpack": "5.83.1",
-    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-middleware": "4.2.0",
-    "webpack-dev-server": "4.7.4",
-    "webpack-hot-middleware": "2.25.1",
-    "webpack-merge": "5.7.3",
+    "webpack": "5.90.3",
+    "webpack-bundle-analyzer": "4.10.1",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-middleware": "7.0.0",
+    "webpack-dev-server": "5.0.2",
+    "webpack-hot-middleware": "2.26.1",
+    "webpack-merge": "5.10.0",
     "workspace-tools": "0.29.1",
     "yargs": "13.3.2",
     "yargs-parser": "13.1.2",

packages/fluentui/docs/src/contexts/exampleSourcesContext.ts

@@ -14,7 +14,7 @@ if (__DEV__) {
   if (module.hot) {
     // We need this to catch cases unhandled by RHL
     // https://github.com/webpack/webpack/issues/834#issuecomment-76590576
-    module.hot.accept(exampleSourcesContext.id, () => {
+    module.hot.accept(exampleSourcesContext.id as string, () => {
       exampleSourcesContext = require.context('../exampleSources/', true, /.source.json$/);
     });
   }

packages/fluentui/docs/src/contexts/examplesContext.ts

@@ -14,7 +14,7 @@ if (__DEV__) {
   if (module.hot) {
     // We need this to catch cases unhandled by RHL
     // https://github.com/webpack/webpack/issues/834#issuecomment-76590576
-    module.hot.accept(examplesContext.id, () => {
+    module.hot.accept(examplesContext.id as string, () => {
       examplesContext = require.context('../examples/', true, /(\w+Example(\w|\.)*|\w+.perf|\w+.bsize)\.tsx$/);
     });
   }

scripts/executors/local-codepen.js

@@ -1,12 +1,12 @@
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const path = require('path');
-const fs = require('fs');
-const yargs = require('yargs');
 const { execSync } = require('child_process');
-const chalk = require('chalk');
+const fs = require('fs');
+const path = require('path');
 
 const { findGitRoot } = require('@fluentui/scripts-monorepo');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const yargs = require('yargs');
 
 const options = yargs.option('webpackConfig', { alias: 'w', type: 'string' }).argv;
 
@@ -34,16 +34,26 @@ if (fs.existsSync(configPath)) {
   }
   const webpackConfig = require(configPath);
   const compiler = webpack(webpackConfig);
-  const server = new WebpackDevServer(compiler, webpackConfig.devServer);
-  const port = webpackConfig.devServer.port || 8080;
+  const devServerOptions = {
+    ...webpackConfig.devServer,
+    host: '127.0.0.1',
+    port: webpackConfig.devServer.port || 8080,
+  };
+  const server = new WebpackDevServer(devServerOptions, compiler);
 
-  server.listen(port, '127.0.0.1', async () => {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const url = await ngrok.connect({ port, host_header: 'localhost:' + port });
-    console.log(`Starting server on http://${url}`);
-    // Put the script tag in a big yellow box so it's easier to find
-    const scriptTag = `  <script src="${url}/fluentui-react.js"></script>  `;
-    const message = ['', '  Replace the @fluentui/react script tag in your codepen with this:', '', scriptTag, ''];
-    console.log(chalk.bgYellowBright.bold(message.map(line => line.padEnd(scriptTag.length)).join('\n')));
+  server.startCallback(() => {
+    ngrok
+      .connect({
+        port: devServerOptions.port,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        host_header: 'localhost:' + devServerOptions.port,
+      })
+      .then((/** @type {string}  */ url) => {
+        console.log(`Starting server on http://${url}`);
+        // Put the script tag in a big yellow box so it's easier to find
+        const scriptTag = `  <script src="${url}/fluentui-react.js"></script>  `;
+        const message = ['', '  Replace the @fluentui/react script tag in your codepen with this:', '', scriptTag, ''];
+        console.log(chalk.bgYellowBright.bold(message.map(line => line.padEnd(scriptTag.length)).join('\n')));
+      });
   });
 }

scripts/gulp/src/tasks/docs.ts

@@ -193,7 +193,7 @@ task('serve:docs:hot', async () => {
       WebpackDevMiddleware(compiler, {
         publicPath: webpackConfig.output.publicPath,
         stats: 'errors-warnings',
-      } as WebpackDevMiddleware.Options),
+      } as WebpackDevMiddleware.Options<any, any>),
     );
 
     if (process.env.NODE_ENV !== 'production') {

scripts/gulp/src/tasks/test-dependencies/utils.ts

@@ -45,12 +45,16 @@ export const prepareWebpackConfig = (options: WebpackOptions) => {
         },
         renderLicenses: modules => {
           modules.forEach(module => {
-            const packageName = module.packageJson.name;
-            const packageVersion = module.packageJson.version;
+            if (module.packageJson) {
+              const packageName = module.packageJson.name;
+              const packageVersion = module.packageJson.version;
 
-            onDependencyPackage(packageName, packageVersion);
+              onDependencyPackage(packageName, packageVersion);
+            } else {
+              console.error('package.json not found');
+            }
 
-            return modules[0].packageJson.name;
+            return modules[0].packageJson?.name;
           });
 
           return '';

scripts/webpack/src/storybook-webpack.config.js

@@ -93,9 +93,9 @@ const createStorybookWebpackConfig = config => {
 
   config.plugins = [...(config.plugins || []), new IgnoreNotFoundExportWebpackPlugin({ include: [/\.tsx?$/] })];
 
-  // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
   if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
-    config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+    // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged)
+    config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin');
   }
 
   config.optimization = { ...config.optimization, minimize: false };