Update webpack to v5

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Oct 1, 2023 · 4bf749e · 4bf749e
2 parents 1fe770c + 9306612
commit 4bf749e
Show file tree

Hide file tree

Showing 149 changed files with 3,301 additions and 4,140 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,39 +13,38 @@ 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: 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/preset-typescript', { isTSX: true, allExtensions: true }],
+    '@babel/preset-react',
   ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "pegjs-inline-precompile",
-    "./scripts/babel/proptypes-from-ts-props",
-    "./scripts/babel/variables-from-scss",
-    "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',
+    './scripts/babel/variables-from-scss',
+    '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/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@
 - Update docsite version selector to use OUI components ([#1028](https://github.com/opensearch-project/oui/pull/1028))
 
 ### 🛠 Maintenance
+- Bump webpack to v5
 
 - Update caniuse database ([#1046](https://github.com/opensearch-project/oui/pull/1046))
 - Bump TypeScript to v4.6.4 ([#879](https://github.com/opensearch-project/oui/pull/879))

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
@@ -2653,12 +2653,12 @@
       "start": {
         "line": 143,
         "column": 4,
-        "index": 4700
+        "index": 4717
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4885
+        "index": 4902
       }
     },
     "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx"
@@ -2671,12 +2671,12 @@
       "start": {
         "line": 143,
         "column": 4,
-        "index": 4700
+        "index": 4717
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4885
+        "index": 4902
       }
     },
     "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": 7990
+        "index": 8078
       },
       "end": {
-        "line": 270,
+        "line": 272,
         "column": 14,
-        "index": 8112
+        "index": 8200
       }
     },
     "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 serve --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",
@@ -30,7 +30,7 @@
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
-    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
+    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack serve --config src-docs/webpack.config.js --port 9999",
     "yo-component": "yo ./generator-oui/app/component.js",
     "start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-oui/app/documentation.js",
@@ -45,30 +45,18 @@
   },
   "resolutions": {
     "**/semver": "^7.5.3",
-    "@babel/cli/**/ansi-regex": "^5.0.1",
-    "@babel/cli/**/minimist": "^1.2.6",
-    "@babel/cli/chokidar/glob-parent": "^6.0.1",
     "@elastic/charts/**/d3-color": "^3.1.0",
     "@types/jest/**/ansi-regex": "^5.0.1",
-    "babel-plugin-add-module-exports/chokidar/glob-parent": "^6.0.1",
-    "babel-plugin-inline-react-svg/**/ansi-regex": "^5.0.1",
-    "babel-plugin-inline-react-svg/svgo/js-yaml": "^3.13.1",
-    "babel-template/**/ansi-regex": "^5.0.1",
     "codesandbox/**/ansi-regex": "^5.0.1",
     "codesandbox/**/got": "^11.8.5",
     "codesandbox/axios": "^0.22.0",
     "codesandbox/pacote": "^12.0.0",
-    "cssnano/**/css-select/nth-check": "^2.0.1",
-    "cssnano/**/postcss": "^7.0.39",
     "enzyme/cheerio/cheerio-select-tmp/css-select/css-what": "^6.1.0",
     "enzyme/cheerio/cheerio-select-tmp/css-what": "^6.1.0",
-    "html-webpack-plugin/**/ansi-regex": "^5.0.1",
     "jest-cli/**/ansi-regex": "^5.0.1",
     "jest-cli/**/tough-cookie": "^4.1.3",
     "jest/**/node-notifier": "^10.0.1",
     "jest/**/tough-cookie": "^4.1.3",
-    "postcss-cli/chokidar/glob-parent": "^6.0.1",
-    "postcss-inline-svg/css-select/nth-check": "^2.0.1",
     "react-view/**/ansi-regex": "^5.0.1",
     "react-view/**/minimist": "^1.2.6",
     "react-view/@miksu/prettier/minimatch": "^3.0.8",
@@ -80,11 +68,6 @@
     "sass-lint/front-matter": "^4.0.2",
     "sass-lint/merge": "^2.1.1",
     "start-server-and-test/**/minimist": "^1.2.6",
-    "webpack-dev-server/**/ansi-regex": "^5.0.1",
-    "webpack-dev-server/chokidar/glob-parent": "^6.0.1",
-    "webpack-dev-server/selfsigned": "^2.0.1",
-    "webpack/**/chokidar/glob-parent": "^6.0.1",
-    "webpack/terser-webpack-plugin/serialize-javascript": "^3.1.0",
     "yo/**/find-versions": "^4.0.0",
     "yo/**/got": "^11.8.5",
     "yo/meow": "^9.0.0"
@@ -133,16 +116,12 @@
   },
   "devDependencies": {
     "@axe-core/puppeteer": "4.6.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/eslint-config-kibana": "^0.15.0",
     "@faker-js/faker": "^8.0.1",
@@ -162,26 +141,24 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^9.8.6",
-    "babel-core": "7.0.0-bridge.0",
+    "autoprefixer": "^10.4.14",
     "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.2",
     "chokidar": "^3.5.3",
-    "circular-dependency-plugin": "^5.2.0",
+    "circular-dependency-plugin": "^5.2.2",
     "codesandbox": "^2.2.3",
+    "comment-stripper": "^0.0.4",
     "core-js": "^3.29.1",
     "cross-env": "^7.0.3",
     "css-loader": "^4.2.2",
-    "cssnano": "^4.1.11",
-    "deasync": "^0.1.28",
+    "cssnano": "^6.0.1",
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
@@ -201,26 +178,26 @@
     "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": "^6.5.3",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "get-port": "^5.1.1",
     "glob": "^8.1.0",
     "html": "^1.0.0",
     "html-format": "^1.0.2",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.5.1",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.41",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "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",
     "puppeteer": "^19.11.1",
-    "raw-loader": "^4.0.1",
     "react": "^16.14.0",
     "react-docgen-typescript": "^1.22.0",
     "react-dom": "^16.12.0",
@@ -240,13 +217,13 @@
     "sass-loader": "npm:@bsfishy/sass-loader@10.4.1-support-sass-embedded.3",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.0",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.1.0",
+    "style-loader": "^3.3.2",
+    "terser-webpack-plugin": "^5.3.9",
     "typescript": "4.6.4",
     "url-loader": "^4.1.0",
-    "webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
     "yeoman-generator": "^5.8.0",
     "yo": "^4.3.1"
   },