Upgrades to webpack 5 and upgrades babel.

.github/workflows/main.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '8.16.0'
+          node-version: '22.21.1'
       - run: yarn install --frozen-lockfile
       - run: yarn build
       - run: yarn test

babel.config.json

@@ -1,15 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env",
+    ["@babel/preset-env", {"loose": true}],
     "@babel/preset-react"
-  ],
-  "plugins": [
-    "add-module-exports",
-    "syntax-async-functions",
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties",
-    ["@babel/plugin-transform-regenerator", {"async": true, "asyncGenerators": true}],
-    ["@babel/plugin-transform-classes", {"loose": true}],
-    ["@babel/plugin-transform-modules-commonjs"]
   ]
 }

package.json

@@ -16,13 +16,13 @@
   "license": "MIT",
   "private": false,
   "engines": {
-    "node": ">=8.15",
+    "node": ">=22.21",
     "npm": ">=3.10.8"
   },
   "scripts": {
     "build": "webpack --mode production",
     "start": "yarn run dev",
-    "dev": "webpack-dev-server --mode development --content-base public --host 0.0.0.0 --disable-host-check",
+    "dev": "webpack-dev-server --mode development --static public --host 0.0.0.0 --allowed-hosts all",
     "lint": "eslint --ext .js,.jsx src",
     "test": "yarn run lint && jest",
     "test:unit": "jest ./test/unit/*.js",
@@ -31,31 +31,20 @@
     "postversion": "git push && git push --tags && yarn publish"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
-    "@babel/plugin-transform-classes": "^7.0.0",
-    "@babel/plugin-transform-react-jsx": "^7.0.0",
-    "@babel/plugin-transform-regenerator": "^7.0.0",
-    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "babel-core": "^7.0.0-bridge.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-react": "^7.28.5",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
-    "babel-loader": "^8.0.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-syntax-async-functions": "^6.8.0",
-    "babelify": "^10.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.0.5",
+    "babel-jest": "29",
+    "babel-loader": "^10.1.1",
+    "copy-webpack-plugin": "11",
     "core-js": "^3",
+    "css-loader": "^7.1.4",
     "eslint": "6.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "7.14.3",
-    "file-loader": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
+    "jest": "29",
     "messageformat": "2.3.0",
     "ml-knn": "^3.0.0",
     "query-string": "4.1.0",
@@ -64,12 +53,11 @@
     "react-papaparse": "^3.8.0",
     "react-redux": "^5.0.0",
     "redux": "^4.0.5",
-    "url-loader": "^2.2.0",
-    "webpack": "4.19.1",
+    "style-loader": "^4.0.0",
+    "webpack": "5",
     "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.1.4",
-    "yarn": "^1.22.10"
+    "webpack-cli": "5",
+    "webpack-dev-server": "5"
   },
   "files": [
     "dist/**/!(mainDev.js)",

src/datasetManifest.js

@@ -1,4 +1,5 @@
 import I18n from "./i18n";
+import datasetsManifest from "../public/datasets-manifest.json";
 
 // Cached copy of the localized datasets manifest.
 let allDatasets;
@@ -21,7 +22,7 @@ export function getAvailableDatasets(specificDatasets) {
 export function getDatasets() {
   // Cache the localization since this shouldn't change.
   if (!allDatasets) {
-    allDatasets = localizeDatasets(require("../public/datasets-manifest.json").datasets);
+    allDatasets = localizeDatasets(datasetsManifest.datasets);
   }
   return allDatasets;
 }

src/trainers/KNNTrainer.js

@@ -11,7 +11,7 @@ import {
 } from "../redux";
 import { getPercentCorrect } from "../helpers/accuracy";
 import { logFirehoseMetric } from "../helpers/metrics";
-const KNN = require("ml-knn");
+import KNN from "ml-knn";
 
 export default class KNNTrainer {
 

test/unit/accuracy.test.js

@@ -8,7 +8,7 @@ import {
   getSummaryStat
 } from '../../src/helpers/accuracy.js';
 import { classificationState, regressionState } from './testData';
-import { ResultsGrades, ColumnTypes, MLTypes } from '../../src/constants.js';
+import { ResultsGrades, MLTypes } from '../../src/constants.js';
 
 const regressionGrades = [
   ResultsGrades.INCORRECT,

webpack.config.js

@@ -1,11 +1,10 @@
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require("path");
 
 const commonConfig = {
   devtool: 'eval-cheap-module-source-map',
   resolve: {
-    extensions: ["*", ".js", ".jsx"],
+    extensions: [".js", ".jsx"],
     // Note: Separate aliases are required for aliases to work in unit tests. These should
     // be added in package.json in the jest configuration.
     alias: {
@@ -15,35 +14,31 @@ const commonConfig = {
   },
   output: {
     filename: "[name].js",
-    libraryTarget: 'umd'
+    library: {
+      type: 'umd'
+    },
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
         loader: 'babel-loader'
       },
-      {test: /\.css$/, loader: 'style-loader!css-loader'},
       {
-        test: /\.jsx$/,
-        enforce: 'pre',
-        exclude: /(node_modules)/,
-        use: [
-          {
-            loader: 'babel-loader',
-          }
-        ]
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
       },
       {
         test: /\.(png|jpg)$/,
-        loader: 'url-loader',
-        options: {
-          limit: 8192,
-          outputPath: 'assets/images',
-          publicPath: 'images',
-          postTransformPublicPath: p =>
-            `__ml_playground_asset_public_path__ + ${p}`,
-          name: '[name].[ext]?[contenthash]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8192
+          }
+        },
+        generator: {
+          filename: 'assets/images/[name][ext][query]'
         }
       },
     ]
@@ -58,22 +53,24 @@ const commonConfig = {
 };
 
 const firstConfigOnly = {
+  output: {
+    clean: true
+  },
   plugins: [
-    new CleanWebpackPlugin(),
-    new CopyPlugin([
-      {
-        from: 'public/datasets/*.*',
-        to: 'assets/datasets/',
-        flatten: true
-      }
-    ])
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'public/datasets/*.*',
+          to: 'assets/datasets/[name][ext]'
+        }
+      ]
+    })
   ]
 };
 
 const externalConfig = {
   externals: {
     lodash: 'lodash',
-    radium: 'radium',
     react: 'react',
     'react-dom': 'react-dom'
   }