DEP Upgrade frontend build stack

.nvmrc

@@ -1 +1 @@
-10
+18

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/src/bundles/bundle.js

@@ -1,4 +1,2 @@
-// Include any legacy Entwine wrappers
-
 // Include boot entrypoint
-require('boot');
+import 'boot';

client/src/components/TOTP/Register.js

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import QRCode from 'qrcode.react';
+import { QRCodeSVG } from 'qrcode.react';
 import { formatCode } from 'lib/formatCode';
 import { inject } from 'lib/Injector'; // eslint-disable-line
 
@@ -132,7 +132,7 @@ class Register extends Component {
 
           <div className="mfa-totp__scan-code">
             <div className="mfa-totp__scan-left">
-              <QRCode value={uri} size={160} />
+              <QRCodeSVG value={uri} size={160} />
             </div>
 
             <div className="mfa-totp__scan-middle">

client/src/components/TOTP/tests/Register-test.js

@@ -152,7 +152,7 @@ describe('Register', () => {
         />
       );
 
-      expect(wrapper.find('QRCode')).toHaveLength(1);
+      expect(wrapper.find('QRCodeSVG')).toHaveLength(1);
     });
   });
 

package.json

@@ -1,12 +1,11 @@
 {
   "name": "silverstripe-totp-authenticator",
-  "main": "./client/src/boot/index.js",
   "author": "SilverStripe Ltd",
   "engines": {
-    "node": ">=10.x"
+    "node": ">=18.x"
   },
   "scripts": {
-    "build": "yarn && yarn lint && yarn test && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && yarn test && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -19,32 +18,40 @@
     "lint-sass": "sass-lint client/src"
   },
   "dependencies": {
-    "@silverstripe/react-injector": "^0.1.2",
-    "classnames": "^2.2.6",
-    "prop-types": "^15.7.2",
-    "qrcode.react": "^0.9.3",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3"
+    "classnames": "^2.3.2",
+    "core-js": "^3.26.0",
+    "prop-types": "^15.8.1",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.6",
-    "@silverstripe/webpack-config": "^1.3.0",
-    "babel-jest": "^23.6.0",
-    "copy-webpack-plugin": "^4",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.10.0",
-    "jest-cli": "^23.6.0"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "babel-jest": "^29.2.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest-cli": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
+    "react-16": "npm:react@^16.14.0",
+    "react-dom-16": "npm:react-dom@^16.14.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
+  "resolutions": {
+    "colors": "1.4.0"
   },
+  "browserslist": [
+    "defaults"
+  ],
   "jest": {
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "^react-dom/client$": "react-dom-16",
+      "^react-dom((/.*)?)$": "react-dom-16$1",
+      "^react((/.*)?)$": "react-16$1"
+    },
     "roots": [
       "client/src"
     ],

webpack.config.js

@@ -1,63 +1,50 @@
 const Path = require('path');
+const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const webpackConfig = require('@silverstripe/webpack-config');
-const {
-  resolveJS,
-  moduleJS,
-  pluginJS,
-  moduleCSS,
-  pluginCSS,
-} = webpackConfig;
 
 const ENV = process.env.NODE_ENV;
 const PATHS = {
-  MODULES: 'node_modules',
-  FILES_PATH: '../',
   ROOT: Path.resolve(),
   SRC: Path.resolve('client/src'),
   DIST: Path.resolve('client/dist'),
 };
 
-
-const config = [
-  {
-    name: 'js',
-    entry: {
-      bundle: `${PATHS.SRC}/bundles/bundle.js`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'js/[name].js',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    resolve: resolveJS(ENV, PATHS),
-    externals: {
-      'lib/Injector': 'Injector',
-    },
-    module: moduleJS(ENV, PATHS),
+// Frontend JS bundle
+const frontendJsConfig = new JavascriptWebpackConfig('js', PATHS, 'silverstripe/totp-authenticator')
+  .setEntry({
+    bundle: `${PATHS.SRC}/bundles/bundle.js`,
+  })
+  .mergeConfig({
     plugins: [
-      ...pluginJS(ENV, PATHS),
-      new CopyWebpackPlugin([
-        { from: 'client/src/images', to: 'images' },
-      ])
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: `${PATHS.SRC}/images`,
+            to: `${PATHS.DIST}/images`,
+          },
+        ]
+      }),
     ],
-  },
-  {
-    name: 'css',
-    entry: {
+  })
+  .getConfig();
+
+// Only include a single "external" which is actually added to the DOM separately
+// Don't include any other externals as this will be used on the frontend
+frontendJsConfig.externals = {
+  'lib/Injector': 'Injector',
+};
+
+const config = [
+  frontendJsConfig,
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
       bundle: `${PATHS.SRC}/bundles/bundle.scss`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'styles/[name].css',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    module: moduleCSS(ENV, PATHS),
-    plugins: pluginCSS(ENV, PATHS),
-  },
+    })
+    .getConfig(),
 ];
 
 // Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
 module.exports = (process.env.WEBPACK_CHILD)
   ? config.find((entry) => entry.name === process.env.WEBPACK_CHILD)
-  : module.exports = config;
+  : config;