feat(demos): update to webpack 5

packages/demos/package.json

@@ -3,6 +3,13 @@
   "version": "2.8.1",
   "private": true,
   "license": "MIT",
+  "workspaces": {
+    "nohoist": [
+      "@types/webpack-dev-middleware",
+      "webpack",
+      "ts-loader"
+    ]
+  },
   "scripts": {
     "build:todomvc": "yarn webpack --config src/todomvc/webpack-config.js --mode production"
   },
@@ -18,39 +25,38 @@
     "@feature-hub/react": "^2.8.1",
     "@feature-hub/serialized-state-manager": "^2.8.1",
     "@feature-hub/server-request": "^2.8.1",
-    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/copy-webpack-plugin": "^6.4.0",
     "@types/express": "^4.16.0",
     "@types/get-port": "^4.0.0",
     "@types/history": "^4.7.2",
     "@types/pino": "^5.8.5",
     "@types/react-router": "^5.0.2",
     "@types/styled-components": "^5.1.4",
-    "@types/webpack": "^4.41.26",
     "@types/webpack-dev-middleware": "^4.1.0",
-    "@types/webpack-merge": "^4.1.5",
-    "copy-webpack-plugin": "^5.0.0",
-    "css-loader": "^3.0.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^5.0.2",
     "express": "^4.16.4",
     "get-port": "^5.0.0",
     "history": "^4.7.2",
     "lit-html": "^1.0.0",
     "pino": "^5.11.1",
     "pino-pretty": "^3.0.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.5.0",
+    "postcss": "^8.2.6",
+    "postcss-loader": "^5.0.0",
+    "postcss-preset-env": "^6.7.0",
     "puppeteer": "^1.11.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-is": "^16.8.6",
     "react-media": "^1.9.2",
     "react-router": "^5.0.1",
-    "style-loader": "^1.0.0",
+    "style-loader": "^2.0.0",
     "styled-components": "^5.2.0",
-    "ts-loader": "^8.0.16",
-    "url-loader": "^2.0.0",
-    "webpack": "^4.46.0",
+    "ts-loader": "^8.0.17",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.24.2",
     "webpack-cli": "^4.5.0",
     "webpack-dev-middleware": "^4.1.0",
-    "webpack-merge": "^4.2.1"
+    "webpack-merge": "^5.7.3"
   }
 }

packages/demos/src/advanced-routing/webpack-config.js

@@ -1,14 +1,14 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './input-feature-app.tsx'),
     externals: {
       react: 'react',
@@ -19,7 +19,7 @@ const configs = [
       publicPath: '/',
     },
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './hello-world-feature-app.tsx'),
     externals: {
       react: 'react',
@@ -30,7 +30,7 @@ const configs = [
       publicPath: '/',
     },
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',

packages/demos/src/custom-logging/webpack-config.js

@@ -1,14 +1,14 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',

packages/demos/src/custom-logging/webpack-config.node.js

@@ -1,4 +1,7 @@
 // @ts-check
 const {createNodeIntegratorWebpackConfig} = require('../webpack-base-config');
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = createNodeIntegratorWebpackConfig(__dirname);

packages/demos/src/feature-app-in-feature-app/webpack-config.js

@@ -1,13 +1,13 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration}
  */
-const featureAppConfig = merge.smart(webpackBaseConfig, {
+const featureAppConfig = merge(webpackBaseConfig, {
   entry: path.join(__dirname, './feature-app-outer.tsx'),
   externals: {
     react: 'react',
@@ -19,22 +19,22 @@ const featureAppConfig = merge.smart(webpackBaseConfig, {
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(featureAppConfig, {
+  merge(featureAppConfig, {
     output: {
       filename: 'feature-app.umd.js',
       libraryTarget: 'umd',
       publicPath: '/',
     },
   }),
-  merge.smart(featureAppConfig, {
+  merge(featureAppConfig, {
     output: {
       filename: 'feature-app.commonjs.js',
       libraryTarget: 'commonjs2',
       publicPath: '/',
     },
     target: 'node',
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',

packages/demos/src/feature-app-in-feature-app/webpack-config.node.js

@@ -1,4 +1,7 @@
 // @ts-check
 const {createNodeIntegratorWebpackConfig} = require('../webpack-base-config');
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = createNodeIntegratorWebpackConfig(__dirname);

packages/demos/src/history-service/webpack-config.js

@@ -1,14 +1,14 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',

packages/demos/src/history-service/webpack-config.node.js

@@ -1,4 +1,7 @@
 // @ts-check
 const {createNodeIntegratorWebpackConfig} = require('../webpack-base-config');
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = createNodeIntegratorWebpackConfig(__dirname);

packages/demos/src/integrator-dom/webpack-config.js

@@ -1,22 +1,22 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './feature-app.ts'),
     output: {
       filename: 'feature-app.umd.js',
       libraryTarget: 'umd',
       publicPath: '/',
     },
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.ts'),
     output: {
       filename: 'integrator.js',

packages/demos/src/module-loader-amd/webpack-config.js

@@ -1,14 +1,14 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './feature-app.tsx'),
     externals: {
       react: 'react',
@@ -19,7 +19,7 @@ const configs = [
       publicPath: '/',
     },
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',

packages/demos/src/module-loader-commonjs/webpack-config.js

@@ -1,14 +1,14 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './feature-app.tsx'),
     output: {
       filename: 'feature-app.commonjs.js',
@@ -17,7 +17,7 @@ const configs = [
     },
     target: 'node',
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.ts'),
     output: {
       filename: 'integrator.js',

packages/demos/src/module-loader-commonjs/webpack-config.node.js

@@ -1,4 +1,7 @@
 // @ts-check
 const {createNodeIntegratorWebpackConfig} = require('../webpack-base-config');
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = createNodeIntegratorWebpackConfig(__dirname);

packages/demos/src/node-integrator.js

@@ -36,13 +36,15 @@ function hasDefaultFunction(value) {
  */
 function loadNodeIntegrator(res, nodeIntegratorFilename) {
   try {
-    /** @type {import('webpack').InputFileSystem & import('webpack').OutputFileSystem} */
+    /** @type {import('webpack').Compiler['outputFileSystem'] & import('fs')} */
     const outputFileSystem = res.locals.webpack.devMiddleware.outputFileSystem;
+    const statsJson = res.locals.webpack.devMiddleware.stats.toJson();
 
-    /** @type {import('webpack').Stats.ToJsonOutput} */
-    const {outputPath} = res.locals.webpack.devMiddleware.stats.toJson();
+    /** @type {string | undefined} */
+    const outputPath =
+      typeof statsJson === 'object' ? statsJson.outputPath : undefined;
 
-    if (!outputPath) {
+    if (!outputPath || !outputFileSystem.join) {
       return undefined;
     }
 

packages/demos/src/react-loading-and-error-ui/webpack-config.js

@@ -1,14 +1,14 @@
 // @ts-check
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './feature-app.tsx'),
     externals: {
       react: 'react',
@@ -19,7 +19,7 @@ const configs = [
       publicPath: '/',
     },
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',

packages/demos/src/server-side-rendering/webpack-config.js

@@ -2,13 +2,13 @@
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const {webpackBaseConfig} = require('../webpack-base-config');
 
 /**
  * @type {webpack.Configuration}
  */
-const featureAppConfig = merge.smart(webpackBaseConfig, {
+const featureAppConfig = merge(webpackBaseConfig, {
   entry: path.join(__dirname, './feature-app.tsx'),
   externals: {
     react: 'react',
@@ -19,35 +19,35 @@ const featureAppConfig = merge.smart(webpackBaseConfig, {
  * @type {webpack.Configuration[]}
  */
 const configs = [
-  merge.smart(featureAppConfig, {
+  merge(featureAppConfig, {
     output: {
       filename: 'feature-app.umd.js',
       libraryTarget: 'umd',
       publicPath: '/',
     },
   }),
-  merge.smart(featureAppConfig, {
+  merge(featureAppConfig, {
     output: {
       filename: 'feature-app.commonjs.js',
       libraryTarget: 'commonjs2',
       publicPath: '/',
     },
     target: 'node',
   }),
-  merge.smart(webpackBaseConfig, {
+  merge(webpackBaseConfig, {
     entry: path.join(__dirname, './integrator.tsx'),
     output: {
       filename: 'integrator.js',
       publicPath: '/',
     },
     plugins: [
-      new CopyPlugin(
-        [
+      new CopyPlugin({
+        patterns: [
           'normalize.css/normalize.css',
           '@blueprintjs/icons/lib/css/blueprint-icons.css',
           '@blueprintjs/core/lib/css/blueprint.css',
-        ].map((cssPath) => ({from: require.resolve(cssPath)}))
-      ),
+        ].map((cssPath) => ({from: require.resolve(cssPath)})),
+      }),
     ],
   }),
 ];

packages/demos/src/server-side-rendering/webpack-config.node.js

@@ -1,4 +1,7 @@
 // @ts-check
 const {createNodeIntegratorWebpackConfig} = require('../webpack-base-config');
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = createNodeIntegratorWebpackConfig(__dirname);