Migrate webpack to the latest

.babelrc.js

@@ -19,7 +19,7 @@ module.exports = {
     ["@babel/env", {
       // `targets` property set via `.browserslistrc`
       "useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
-      "corejs": 3,
+      "corejs": process.env.NO_COREJS_POLYFILL ? undefined : 3,
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES === 'false' ? false : process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
     ["@babel/typescript", { isTSX: true, allExtensions: true }],

package.json

@@ -12,7 +12,7 @@
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --inline --hot --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack-dev-server --hot --config=src-docs/webpack.config.js",
     "test-docker": "node ./scripts/test-docker.js",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
@@ -52,7 +52,8 @@
     "cacache/y18n": "^4.0.1",
     "**/glob-parent": "^6.0.1",
     "**/svgo/js-yaml": "^3.13.1",
-    "webpack-dev-server/selfsigned": "^2.0.1",
+    "**/@types/express": "4.17.13",
+    "**/@types/express-serve-static-core": "4.17.30",
     "**/eslint/shelljs": "^0.8.5",
     "**/css-select/css-what": "^6.1.0",
     "**/css-select/nth-check": "^2.0.1",
@@ -63,11 +64,10 @@
     "codesandbox/**/pacote": "^12.0.0",
     "**/meow/trim-newlines": "^4.0.2",
     "**/stylelint/micromatch": "^3.1.0",
-    "webpack/**/serialize-javascript": "^3.1.0",
     "**/scss-tokenizer": "^0.4.3",
     "**/node-notifier": "^10.0.1",
     "**/got": "^11.8.5",
-    "**/postcss": "^7.0.39",
+    "**/postcss": "^8.4.21",
     "**/eslint": "^7.10.0",
     "**/har-validator": "^5.1.5",
     "**/d3-color": "^3.1.0",
@@ -122,16 +122,16 @@
   },
   "devDependencies": {
     "@axe-core/puppeteer": "^4.1.1",
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-async-to-generator": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.12.1",
+    "@babel/plugin-transform-async-to-generator": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@elastic/charts": "^30.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
@@ -150,12 +150,12 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.14",
     "axe-core": "^4.1.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-inline-react-svg": "^1.1.1",
@@ -164,12 +164,12 @@
     "cache-loader": "^4.1.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.4.2",
-    "circular-dependency-plugin": "^5.2.0",
+    "circular-dependency-plugin": "^5.2.2",
     "codesandbox": "^2.1.16",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
-    "cssnano": "^4.1.11",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
     "deasync": "^0.1.20",
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
@@ -191,23 +191,26 @@
     "eslint-plugin-react-hooks": "^4.1.2",
     "expose-gc": "^1.0.0",
     "faker": "^4.1.0",
-    "file-loader": "^6.1.0",
+    "file-loader": "^6.2.0",
     "findup": "^0.1.5",
-    "fork-ts-checker-webpack-plugin": "^5.1.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
     "html": "^1.0.0",
     "html-format": "^1.0.1",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.5.0",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "node-sass": "^7.0.1",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "pegjs": "^0.10.0",
-    "postcss-cli": "^7.1.2",
-    "postcss-inline-svg": "^4.1.0",
-    "postcss-loader": "^4.0.1",
+    "postcss-cli": "^10.1.0",
+    "postcss-inline-svg": "^6.0.0",
+    "postcss-loader": "^7.0.2",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
     "prop-types": "^15.6.0",
@@ -230,17 +233,17 @@
     "sass-extract": "^2.1.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^10.0.1",
+    "sass-loader": "^13.2.0",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.1.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.7",
     "typescript": "4.0.5",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.12.0",
     "yeoman-generator": "^5.7.0",
     "yo": "^4.3.0"
   },

scripts/babel/proptypes-from-ts-props/index.test.ts

@@ -2556,7 +2556,7 @@ export { Foo };
         babelOptions
       );
 
-      expect(result.code).toBe('');
+      expect(result.code).toBe('export {};');
     });
 
     it('removes multiple type export from ExportNamedDeclaration', () => {
@@ -2569,7 +2569,7 @@ export { Foo, Bar };
         babelOptions
       );
 
-      expect(result.code).toBe('');
+      expect(result.code).toBe('export {};');
     });
 
     it('removes type exports from ExportNamedDeclaration, leaving legitimate exports', () => {
@@ -2666,7 +2666,7 @@ export type Foo = string;
         babelOptions
       );
 
-      expect(result.code).toBe('');
+      expect(result.code).toBe('export {};');
     });
 
     it('removes 3rd-party type exports', () => {

scripts/compile-oui.js

@@ -311,7 +311,7 @@ function compileBundle() {
 
   console.log('Building chart theme module...');
   execSync(
-    'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
+    'webpack --entry-reset ./themes/charts/themes.ts -o dist/oui_charts_theme.js --output-enabled-library-types="commonjs" --config=src/webpack.config.js',
     {
       stdio: 'inherit',
     }
@@ -334,7 +334,7 @@ function compileBundle() {
 
   /* OUI -> EUI Aliases */
   execSync(
-    'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
+    'webpack --entry-reset ./themes/charts/themes.ts -o dist/eui_charts_theme.js --output-enabled-library-types="commonjs" --config=src/webpack.config.js',
     {
       stdio: 'inherit',
     }

src-docs/webpack.config.js

@@ -12,6 +12,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const babelConfig = require('./.babelrc.js');
 // const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
@@ -58,6 +59,11 @@ const webpackConfig = {
 
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
+    fallback: {
+      fs: false,
+      path: require.resolve('path-browserify'),
+      os: require.resolve('os-browserify/browser'),
+    },
   },
 
   resolveLoader: {
@@ -101,14 +107,21 @@ const webpackConfig = {
       },
       {
         test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
-        loader: 'file-loader',
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]',
+        },
       },
       {
         test: /\.(png|jp(e*)g|svg|gif)$/,
-        loader: 'url-loader',
-        options: {
-          limit: 8000, // Convert images < 8kb to base64 strings
-          name: 'images/[hash]-[name].[ext]',
+        type: 'asset',
+        generator: {
+          filename: 'images/[contenthash]-[name][ext]',
+        },
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8 * 1024,
+          },
         },
       },
     ],
@@ -132,6 +145,10 @@ const webpackConfig = {
     //   typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
     //   async: false, // makes errors more visible, but potentially less performant
     // }),
+
+    new NodePolyfillPlugin({
+      includeAliases: ['Buffer', 'process'],
+    }),
   ],
 
   devServer: isDevelopment
@@ -154,9 +171,6 @@ const webpackConfig = {
           : undefined,
       }
     : undefined,
-  node: {
-    fs: 'empty',
-  },
 };
 
 // Inspired by `get-port-sync`, but propogates options

src/webpack.config.js

@@ -57,7 +57,9 @@ const plugins = [
 ];
 
 const terserPlugin = new TerserPlugin({
-  sourceMap: true,
+  terserOptions: {
+    sourceMap: true,
+  },
 });
 
 module.exports = {
@@ -78,6 +80,9 @@ module.exports = {
 
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
+    fallback: {
+      path: require.resolve('path-browserify'),
+    },
   },
 
   // Specify where these libraries should be found
@@ -113,6 +118,7 @@ module.exports = {
   optimization: {
     minimize: isProduction,
     minimizer: [terserPlugin],
-    noEmitOnErrors: true,
+    emitOnErrors: false,
+    usedExports: false,
   },
 };