[Platform] Upgrade to webpack 5 (elastic#6193)

* Upgrade to webpack 5, converted enough to make the docs run

* refactored port selection in webpack config

* Update watcher logic in react-docgen-typescript

* removed file-loader

* Updated prop-loader to process up file changes

* further webpack.config.js cleanup

* update themes/charts/webpackage.config.js

* Upgrade to webpack 5, converted enough to make the docs run

* refactored port selection in webpack config

* removed file-loader

* updated yarn.lock

* Make cypress happy with webpack 5

* gave eslint its own webpack config just for resolving

* Remove file-loader from cypress webpack config

.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
         extensions: ['.ts', '.tsx', '.js', '.json'],
       },
       webpack: {
-        config: './src-docs/webpack.config.js',
+        config: './.eslintwebpack.config.js',
       },
     },
     react: {

.eslintwebpack.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+
+const webpackConfig = {
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+
+  resolveLoader: {
+    alias: {
+      'prop-loader': path.resolve(
+        __dirname,
+        '../scripts/loaders/prop-loader.js'
+      ),
+    },
+  },
+};
+
+module.exports = webpackConfig;

cypress/webpack.config.js

@@ -8,8 +8,7 @@
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ProvidePlugin, DefinePlugin } = require('webpack');
 
 const THEME_IMPORT = `'../../dist/eui_theme_${process.env.THEME}.css'`;
 
@@ -22,6 +21,11 @@ module.exports = {
 
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
+    fallback: {
+      fs: false,
+      os: false,
+      process: require.resolve('process/browser'),
+    },
   },
 
   module: {
@@ -30,13 +34,14 @@ module.exports = {
         test: /\.(js|tsx?)$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
+        sideEffects: true, // tells webpack not to tree shake `import './'` lines
         options: {
           plugins: ['istanbul'],
         },
       },
       {
         test: /\.css$/,
-        loaders: [
+        use: [
           {
             loader: 'style-loader',
             options: {
@@ -47,16 +52,16 @@ module.exports = {
         ],
         exclude: /node_modules/,
       },
-      {
-        test: /\.(woff|woff2|ttf|eot|ico|png|gif|jpg|jpeg)(\?|$)/,
-        loader: 'file-loader',
-      },
     ],
     strictExportPresence: false,
   },
 
   plugins: [
-    new webpack.DefinePlugin({
+    new ProvidePlugin({
+      process: 'process/browser',
+    }),
+
+    new DefinePlugin({
       THEME_IMPORT, // allow cypress/suport/index.js to require the correct css file
     }),
   ],

package.json

@@ -12,7 +12,7 @@
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack serve --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",
@@ -159,20 +159,20 @@
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-pegjs-inline-precompile": "^0.1.1",
     "babel-template": "^6.26.0",
+    "buffer": "^6.0.3",
     "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",
+    "css-loader": "^6.7.1",
     "cssnano": "^4.1.10",
     "cypress": "^10.6.0",
     "cypress-axe": "^0.14.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
-    "deasync": "^0.1.20",
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
@@ -198,20 +198,22 @@
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
     "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-sass": "^6.0.1",
     "nodegit": "^0.28.0-alpha.10",
+    "path": "^0.12.7",
     "pegjs": "^0.10.0",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
-    "postcss-loader": "^4.0.1",
+    "postcss-loader": "^7.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
     "prettier-stylelint": "^0.4.2",
+    "process": "^0.11.10",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "puppeteer": "^5.5.0",
@@ -233,18 +235,18 @@
     "sass-extract": "^2.1.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^13.0.2",
     "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.5",
     "typescript": "4.5.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0",
     "yargs": "^17.2.1",
     "yeoman-generator": "^4.12.0",
     "yo": "^3.1.1"

scripts/babel/react-docgen-typescript.js

@@ -9,8 +9,8 @@ const util = require('util');
 const { SyntaxKind } = require('typescript');
 const chokidar = require('chokidar');
 
-const { NODE_ENV, CI, WEBPACK_DEV_SERVER } = process.env;
-const isDevelopment = WEBPACK_DEV_SERVER === 'true' && CI == null;
+const { NODE_ENV, CI, WEBPACK_SERVE } = process.env;
+const isDevelopment = WEBPACK_SERVE === 'true' && CI == null;
 const bypassWatch = NODE_ENV === 'puppeteer' || NODE_ENV === 'production';
 
 /**

scripts/compile-eui.js

@@ -156,7 +156,7 @@ function compileBundle() {
 
   console.log('Building chart theme module...');
   execSync(
-    'webpack --output-library-target="commonjs" --config=src/themes/charts/webpack.config.js',
+    'webpack --config=src/themes/charts/webpack.config.js',
     {
       stdio: 'inherit',
     }

scripts/loaders/prop-loader.js

@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const ts = require('typescript');
 const { SyntaxKind } = require('typescript');
-const glob = require('glob');
-
-const files = glob.sync('src/**/*.{ts,tsx}', { absolute: true });
 
 /**
  * To support extended interfaces and types from tsx files too.
@@ -13,10 +10,9 @@ const options = {
   strict: true,
 };
 
-const program = ts.createProgram(files, options);
-
 module.exports = function(fileSource) {
   const docsInfo = [];
+  const program = ts.createProgram([this.resourcePath], options);
   const source = program.getSourceFile(this.resourcePath);
   if (!source) return fileSource;
   const checker = program.getTypeChecker();

src-docs/src/views/elastic_charts/shared.js

@@ -10,7 +10,9 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 import { BarSeries, LineSeries, AreaSeries } from '@elastic/charts';
-import { devDependencies } from '../../../../package';
+import euiPackage from '../../../../package';
+
+const { devDependencies } = euiPackage;
 
 export const chartsVersion = devDependencies['@elastic/charts'].match(
   /\d+\.\d+\.\d+/