[SDK-3796] Upgrade to Webpack 5

.babelrc

@@ -2,37 +2,11 @@
   "plugins": [
     "version-inline",
     "transform-css-import-to-string",
-    "babel-plugin-stylus-compiler"
+    "babel-plugin-stylus-compiler",
+    "@babel/plugin-proposal-function-bind"
   ],
   "presets": [
-    [
-      "es2015",
-      {
-        "loose": true,
-        "modules": false
-      }
-    ],
-    "stage-0",
-    "react"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "transform-es2015-modules-commonjs"
-      ]
-    },
-    "npm": {
-      "presets": [
-        [
-          "es2015",
-          {
-            "loose": true,
-            "modules": "commonjs"
-          }
-        ],
-        "stage-0",
-        "react"
-      ]
-    }
-  }
-}
+    ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3.26.1" }],
+    "@babel/preset-react"
+  ]
+}

.browserslistrc

@@ -0,0 +1 @@
+defaults, last 2 versions, not dead, IE 11

Gruntfile.js

@@ -1,35 +1,11 @@
 'use strict';
 
 const path = require('path');
-const fs = require('fs');
-const tmp = require('tmp');
-const pkg = require('./package');
 const webpack = require('webpack');
 const webpackConfig = require('./webpack.config.js');
 const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
-const { spawnSync } = require('child_process');
 
-/**
- * This is a helper function to generate valid certs using mkcert.
- * If mkcert is not installed it will return false.
- */
-function getDevCerts() {
-  let result = false;
-  const tmpDir = tmp.dirSync({ unsafeCleanup: true, prefix: 'lock-dev-' });
-
-  try {
-    spawnSync('mkcert', ['localhost'], { cwd: tmpDir.name });
-    result = {
-      key: fs.readFileSync(path.join(tmpDir.name, 'localhost-key.pem')),
-      cert: fs.readFileSync(path.join(tmpDir.name, 'localhost.pem'))
-    };
-  } catch (err) {}
-
-  tmpDir.removeCallback();
-  return result;
-}
-
-module.exports = function(grunt) {
+module.exports = function (grunt) {
   const pkg_info = grunt.file.readJSON('package.json');
 
   grunt.initConfig({
@@ -61,8 +37,9 @@ module.exports = function(grunt) {
       touch_index: 'touch src/index.js'
     },
     webpack: {
-      options: webpackConfig,
       build: {
+        ...webpackConfig,
+        mode: 'production',
         devtool: 'source-map',
         output: {
           path: path.join(__dirname, 'build'),
@@ -80,11 +57,6 @@ module.exports = function(grunt) {
             }
           }),
           new webpack.optimize.AggressiveMergingPlugin(),
-          new webpack.optimize.UglifyJsPlugin({
-            compress: { warnings: false, screw_ie8: true },
-            sourceMap: true,
-            comments: false
-          }),
           new UnminifiedWebpackPlugin(),
           new webpack.BannerPlugin({
             raw: false,
@@ -98,17 +70,11 @@ module.exports = function(grunt) {
     },
     'webpack-dev-server': {
       options: {
-        webpack: webpackConfig,
-        publicPath: '/build/'
-      },
-      dev: {
-        hot: true,
-        port: 3000,
-        https: getDevCerts() || true,
-        webpack: {
-          devtool: 'source-map'
+        output: {
+          publicPath: '/build/'
         }
       },
+      dev: webpackConfig,
       design: {
         webpack: {
           entry: './support/design/index.js',
@@ -146,14 +112,16 @@ module.exports = function(grunt) {
   grunt.registerTask('prepare_dev', ['clean:dev']);
   grunt.registerTask('dev', ['prepare_dev', 'webpack-dev-server:dev']);
   grunt.registerTask('design', ['prepare_dev', 'webpack-dev-server:design']);
-  grunt.registerMultiTask('i18n', 'Prepares i18n files to be hosted in CDN', function() {
+  grunt.registerMultiTask('i18n', 'Prepares i18n files to be hosted in CDN', function () {
     var languages = {};
+
     var Auth0 = {
-      registerLanguageDictionary: function(lang, dict) {
+      registerLanguageDictionary: function (lang, dict) {
         languages[lang] = dict;
       }
     };
-    this.files.forEach(function(file) {
+
+    this.files.forEach(function (file) {
       var filename = file.src[0];
       var lang = path.basename(filename, '.js');
       var dict = require('./' + filename).default || require('./' + filename);

karma.conf.js

@@ -118,6 +118,6 @@ module.exports = function (config) {
       }
     },
 
-    browsers: ['bs_chrome_windows']
+    browsers: ['bs_chrome_windows', 'bs_ie11_windows']
   });
 };

package.json

@@ -41,22 +41,38 @@
   },
   "devDependencies": {
     "@auth0/component-cdn-uploader": "^2.2.2",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "@cfaester/enzyme-adapter-react-18": "^0.6.0",
     "@google-cloud/translate": "^6.0.2",
-    "babel-core": "^6.17.0",
-    "babel-eslint": "^7.2.2",
-    "babel-loader": "^6.2.5",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^29.3.1",
+    "babel-loader": "8.3.0",
     "babel-plugin-stylus-compiler": "^1.4.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-css-import-to-string": "0.0.2",
     "babel-plugin-version-inline": "^1.0.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.3.13",
-    "babelify": "^8.0.0",
+    "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "bump-version": "^0.5.0",
     "chalk": "^4.1.2",
+    "core-js": "^3.26.1",
     "cross-env": "^7.0.3",
     "css-loader": "^0.28.11",
     "emojic": "^1.1.15",
@@ -70,18 +86,20 @@
     "flat": "^5.0.2",
     "glob": "^7.1.6",
     "grunt": "^1.3.0",
-    "grunt-babel": "^6.0.0",
+    "grunt-babel": "^8.0.0",
     "grunt-cli": "^0.1.13",
     "grunt-concurrent": "^2.3.1",
     "grunt-contrib-clean": "^0.7.0",
     "grunt-env": "^0.4.4",
     "grunt-exec": "^0.4.6",
-    "grunt-webpack": "^2.0.1",
+    "grunt-webpack": "^5.0.0",
     "husky": "^7.0.2",
-    "jest": "^21.2.1",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom-global": "^4.0.0",
     "json-beautify": "^1.0.1",
-    "karma": "^6.3.4",
-    "karma-babel-preprocessor": "^7.0.0",
+    "karma": "^6.4.1",
+    "karma-babel-preprocessor": "^8.0.2",
     "karma-browserify": "^8.1.0",
     "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.1.0",
@@ -98,12 +116,12 @@
     "stylus-loader": "^2.3.1",
     "tmp": "^0.2.1",
     "uglify-js": "^2.7.4",
-    "unminified-webpack-plugin": "^1.1.1",
+    "unminified-webpack-plugin": "^3.0.0",
     "unreleased": "^0.1.0",
     "watchify": "^4.0.0",
-    "webpack": "^2.2.1",
-    "webpack-core": "^0.6.8",
-    "webpack-dev-server": "^2.3.0"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
     "auth0-js": "^9.19.0",
@@ -123,10 +141,6 @@
     "url-join": "^1.1.0",
     "validator": "^13.6.0"
   },
-  "resolutions": {
-    "node-fetch": "^2.6.1",
-    "crypto-js": "^4.1.1"
-  },
   "ccu": {
     "name": "lock",
     "cdn": "https://cdn.auth0.com",
@@ -167,7 +181,8 @@
     "coverageReporters": [
       "lcov",
       "text-summary"
-    ]
+    ],
+    "testEnvironment": "jest-environment-jsdom-global"
   },
   "lint-staged": {
     "*.{js,jsx}": [

src/__tests__/__snapshots__/auth_button.test.jsx.snap

@@ -4,17 +4,17 @@ exports[`AuthButton renders correctly 1`] = `
 <a
   className="auth0-lock-social-button auth0-lock-social-big-button"
   data-provider="strategy"
-  onClick={[Function]}
-  style={Object {}}
+  onClick={[MockFunction]}
+  style={{}}
   type="button"
 >
   <div
     className="auth0-lock-social-button-icon"
-    style={Object {}}
+    style={{}}
   />
   <div
     className="auth0-lock-social-button-text"
-    style={Object {}}
+    style={{}}
   >
     label
   </div>
@@ -25,9 +25,9 @@ exports[`AuthButton renders with style customizations 1`] = `
 <a
   className="auth0-lock-social-button auth0-lock-social-big-button"
   data-provider="strategy"
-  onClick={[Function]}
+  onClick={[MockFunction]}
   style={
-    Object {
+    {
       "backgroundColor": "primaryColor",
     }
   }
@@ -36,15 +36,15 @@ exports[`AuthButton renders with style customizations 1`] = `
   <div
     className="auth0-lock-social-button-icon"
     style={
-      Object {
+      {
         "backgroundImage": "url('test')",
       }
     }
   />
   <div
     className="auth0-lock-social-button-text"
     style={
-      Object {
+      {
         "color": "foregroundColor",
       }
     }