Update webpack to v5 (opensearch-project#584)

Signed-off-by: Andrey Myssak <[email protected]> Co-authored-by: Sergey Myssak <[email protected]>
andreymyssak · May 20, 2023 · 570cf75 · 570cf75
1 parent 71dc4bd
commit 570cf75
Show file tree

Hide file tree

Showing 147 changed files with 2,976 additions and 2,683 deletions.
diff --git a/.babelrc-test-env.js b/.babelrc-test-env.js
@@ -10,11 +10,6 @@
  */
 
 module.exports = {
-  "extends": "./.babelrc.js",
-  "plugins": [
-    "@babel/plugin-transform-runtime",
-    "@babel/plugin-transform-async-to-generator",
-    "@babel/plugin-syntax-dynamic-import",
-    "dynamic-import-node"
-  ],
+  extends: './.babelrc.js',
+  plugins: ['dynamic-import-node'],
 };
diff --git a/.babelrc.js b/.babelrc.js
@@ -13,38 +13,37 @@ module.exports = {
   // We need to preserve comments as they are used by webpack for
   // naming chunks during code-splitting. The compression step during
   // bundling will remove them later.
-  "comments": true,
+  comments: true,
 
-  "presets": [
-    ["@babel/env", {
-      // `targets` property set via `.browserslistrc`
-      "useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
-      "corejs": 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 }],
-    "@babel/react"
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        // `targets` property set via `.browserslistrc`
+        useBuiltIns: process.env.NO_COREJS_POLYFILL ? false : 'usage',
+        corejs: 3,
+        modules: process.env.BABEL_MODULES
+          ? process.env.BABEL_MODULES === 'false'
+            ? false
+            : process.env.BABEL_MODULES
+          : 'commonjs', // babel's default is commonjs
+      },
+    ],
+    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+    '@babel/preset-react',
   ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "pegjs-inline-precompile",
-    "./scripts/babel/proptypes-from-ts-props",
-    "add-module-exports",
-    // stage 3
-    "@babel/proposal-object-rest-spread",
-    // stage 2
-    "@babel/proposal-class-properties",
+  plugins: [
+    'pegjs-inline-precompile',
+    './scripts/babel/proptypes-from-ts-props',
+    'add-module-exports',
     [
-      "inline-react-svg",
+      'inline-react-svg',
       {
-        "ignorePattern": "images/*",
-        "svgo": {
-          "plugins": [
-            { "cleanupIDs": false },
-            { "removeViewBox": false }
-          ]
-        }
-      }
+        ignorePattern: 'images/*',
+        svgo: {
+          plugins: [{ cleanupIDs: false }, { removeViewBox: false }],
+        },
+      },
     ],
   ],
 };
diff --git a/generator-oui/documentation/index.js b/generator-oui/documentation/index.js
@@ -59,7 +59,7 @@ module.exports = class extends Generator {
         name: 'folderName',
         type: 'input',
         store: true,
-        default: answers => answers.name,
+        default: (answers) => answers.name,
       });
 
       prompts.push({
@@ -71,7 +71,7 @@ module.exports = class extends Generator {
       });
     }
 
-    return this.prompt(prompts).then(answers => {
+    return this.prompt(prompts).then((answers) => {
       this.answers = answers;
     });
   }
@@ -96,9 +96,7 @@ module.exports = class extends Generator {
         fileName,
       });
 
-      const documentationPagePath = (config.documentationPagePath = `${path}/${
-        config.name
-      }/${config.name}_example.js`);
+      const documentationPagePath = (config.documentationPagePath = `${path}/${config.name}/${config.name}_example.js`);
 
       this.fs.copyTpl(
         this.templatePath('documentation_page.js'),
@@ -163,7 +161,7 @@ module.exports = class extends Generator {
           `${chalk.magenta(
             'const'
           )} ${componentExamplePrefix}Source = require(${chalk.cyan(
-            `'!!raw-loader!./${fileName}'`
+            `'./${fileName}?raw'`
           )});\n` +
           `${chalk.magenta(
             'const'

diff --git a/generator-oui/documentation/templates/documentation_page.js b/generator-oui/documentation/templates/documentation_page.js
@@ -22,7 +22,7 @@ import {
 } from '../../../../src/components';
 
 import <%= componentExampleName %> from './<%= fileName %>';
-const <%= componentExamplePrefix %>Source = require('!!raw-loader!./<%= fileName %>');
+const <%= componentExamplePrefix %>Source = require('./<%= fileName %>?raw');
 const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>);
 
 export const <%= componentExampleName %>Example = {

diff --git a/i18ntokens.json b/i18ntokens.json
@@ -187,12 +187,12 @@
       "start": {
         "line": 191,
         "column": 8,
-        "index": 5650
+        "index": 5638
       },
       "end": {
         "line": 193,
         "column": 40,
-        "index": 5750
+        "index": 5738
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -205,12 +205,12 @@
       "start": {
         "line": 217,
         "column": 14,
-        "index": 6647
+        "index": 6635
       },
       "end": {
         "line": 221,
         "column": 16,
-        "index": 6920
+        "index": 6908
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -223,12 +223,12 @@
       "start": {
         "line": 223,
         "column": 14,
-        "index": 6953
+        "index": 6941
       },
       "end": {
         "line": 226,
         "column": 16,
-        "index": 7150
+        "index": 7138
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -2653,12 +2653,12 @@
       "start": {
         "line": 143,
         "column": 4,
-        "index": 4714
+        "index": 4715
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4899
+        "index": 4900
       }
     },
     "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx"
@@ -2671,12 +2671,12 @@
       "start": {
         "line": 143,
         "column": 4,
-        "index": 4714
+        "index": 4715
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4899
+        "index": 4900
       }
     },
     "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx"
@@ -3533,14 +3533,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 267,
+        "line": 269,
         "column": 12,
-        "index": 7947
+        "index": 8035
       },
       "end": {
-        "line": 270,
+        "line": 272,
         "column": 14,
-        "index": 8069
+        "index": 8157
       }
     },
     "filepath": "src/components/selectable/selectable_templates/selectable_template_sitewide.tsx"

diff --git a/package.json b/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,6 @@
     "cacache/y18n": "^4.0.1",
     "**/glob-parent": "^6.0.1",
     "babel-plugin-inline-react-svg/svgo/js-yaml": "^3.13.1",
-    "webpack-dev-server/selfsigned": "^2.0.1",
     "**/eslint/shelljs": "^0.8.5",
     "**/css-select/css-what": "^6.1.0",
     "**/css-select/nth-check": "^2.0.1",
@@ -66,7 +65,6 @@
     "**/scss-tokenizer": "^0.4.3",
     "**/node-notifier": "^10.0.1",
     "**/got": "^11.8.5",
-    "**/postcss": "^7.0.39",
     "**/eslint": "^7.10.0",
     "**/har-validator": "^5.1.5",
     "**/d3-color": "^3.1.0",
@@ -122,16 +120,12 @@
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@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/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/cli": "^7.21.5",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/template": "^7.20.7",
     "@elastic/charts": "^30.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
@@ -150,21 +144,19 @@
     "@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-plugin-add-module-exports": "^1.0.2",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-inline-react-svg": "^1.1.1",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-pegjs-inline-precompile": "^0.1.1",
-    "babel-template": "^6.26.0",
     "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",
@@ -190,28 +182,28 @@
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
     "expose-gc": "^1.0.0",
-    "file-loader": "^6.1.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.1",
     "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": "^8.0.0",
     "pegjs": "^0.10.0",
-    "postcss-cli": "^7.1.2",
-    "postcss-inline-svg": "^4.1.0",
-    "postcss-loader": "^4.0.1",
+    "postcss": "^8.4.23",
+    "postcss-cli": "^10.1.0",
+    "postcss-inline-svg": "^6.0.0",
+    "postcss-loader": "^7.3.0",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
     "prop-types": "^15.6.0",
     "puppeteer": "^5.5.0",
-    "raw-loader": "^4.0.1",
     "react": "^16.14.0",
     "react-docgen-typescript": "^1.20.5",
     "react-dom": "^16.12.0",
@@ -229,17 +221,16 @@
     "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.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",
-    "typescript": "4.0.5",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "style-loader": "^3.3.2",
+    "terser-webpack-plugin": "^5.3.9",
+    "typescript": "4.1.6",
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
     "yeoman-generator": "^5.7.0",
     "yo": "^4.3.1"
   },