webpack 4 to 5

.babelrc

@@ -1,11 +1,3 @@
 {
-  "presets": ["env", "react" ],
-    "plugins": [
-      "add-module-exports",
-      "syntax-async-functions",
-      "transform-object-rest-spread",
-      "transform-class-properties",
-      ["transform-regenerator", {"async": true, "asyncGenerators": true}],
-      ["transform-es2015-classes", {"loose": true}]
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   "globals": {
   },
   "plugins": [
+    "react"
   ],
   "extends": [
     'plugin:react/recommended',
@@ -21,7 +22,7 @@ module.exports = {
       "version": "detect"
     }
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {

package.json

@@ -13,12 +13,16 @@
       "^@ml(.*)$": "<rootDir>/src/$1",
       "^@public(.*)$": "<rootDir>/public/$1"
     },
-    "setupTestFrameworkScriptFile": "<rootDir>/test/setup.js"
+    "setupFilesAfterEnv": ["<rootDir>/test/setup.js"],
+    "globals": {
+      "window": {},
+      "location": {}
+    }
   },
   "scripts": {
-    "build": "webpack -p",
+    "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",
     "lint": "eslint --ext .js,.jsx src",
     "test": "yarn run lint && jest",
     "test:unit": "jest ./test/unit/*.js",
@@ -39,42 +43,35 @@
     "react-dom": "~16.14.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "7.25.9",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.23.0",
     "@code-dot-org/redactable-markdown": "^0.4.0",
     "@code-dot-org/svm": "^0.1.1",
     "@tensorflow-models/knn-classifier": "~1.1.0",
     "@tensorflow-models/mobilenet": "^2.0.4",
     "@tensorflow/tfjs": "^1.3.1",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^7.1.4",
+    "assert": "^2.1.0",
+    "babel-loader": "^8.3.0",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-syntax-async-functions": "^6.8.0",
-    "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-es2015-classes": "^6.9.0",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-plugin-transform-react-jsx": "^6.8.0",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.5.0",
-    "babelify": "^10.0.0",
     "canvas": "^2.8.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.0.5",
-    "css-loader": "^3.2.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^5.0.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.15.7",
-    "eslint": ">=4.18.2",
-    "eslint-plugin-react": "^7.11.0",
-    "file-loader": "^4.2.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.37.5",
     "idempotent-babel-polyfill": "6.26.0-1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
+    "jest": "^29.7.0",
     "jquery": "1.12.1",
     "lodash": "^4.17.5",
     "mem": ">=4.0.0",
     "node-fetch": "^2.6.0",
     "prettier": "1.16.1",
+    "process": "^0.11.10",
     "query-string": "4.1.0",
     "radium": "^0.25.2",
     "react": "~16.14.0",
@@ -84,12 +81,12 @@
     "remark-parse": "^7.0.2",
     "remark-rehype": "^5.0.0",
     "sinon": "^7.5.0",
-    "style-loader": "^1.0.0",
-    "url-loader": "^2.2.0",
-    "webpack": "4.19.1",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.1.4",
+    "style-loader": "^2.0.0",
+    "util": "^0.12.5",
+    "webpack": "^5.94.0",
+    "webpack-bundle-analyzer": "^4.10.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2",
     "yargs": "^14.0.0"
   },
   "bugs": {
@@ -100,7 +97,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "messageformat": "^1.1.0",
+    "messageformat": "2.3.0",
     "react-typist": "^2.0.5"
   },
   "files": [

src/oceans/assetPath.js

@@ -1,5 +1,14 @@
-global.__ml_activities_asset_public_path__ = './assets/';
-
 export const setAssetPath = (path) => {
-  global.__ml_activities_asset_public_path__  = path;
+  global.__desired_webpack_public_path__ = path;
 };
+
+// Sync webpack's internal public path (__webpack_require__.p) with the global.
+// This is needed when this bundle is nested inside another webpack bundle (e.g.
+// code-dot-org apps): webpack's automatic script-tag URL detection runs first
+// and sets __webpack_require__.p to the host bundle's path. By overriding it
+// here — before source files evaluate their module-level asset requires —
+// asset/resource URLs (sounds, model.json) resolve to the correct location.
+// Fall back to '/' for running locally.
+
+/* eslint-disable-next-line no-undef */
+__webpack_public_path__ = global.__desired_webpack_public_path__ || '/';

test/unit/oceans/models/predict.test.js

@@ -8,7 +8,6 @@ import {TrashOceanObject} from '@ml/oceans/OceanObject';
 describe('Predict test', () => {
   beforeAll(() => {
     initFishData();
-    jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000;
   });
 
   beforeEach(() => {

test/unit/oceans/ui.test.js

@@ -158,11 +158,7 @@ describe('Words', () => {
 
     expect(() => {
       shallow(<Words {...DEFAULT_PROPS} />);
-    }).toThrowError(
-      new Error(
-        "Could not find a set of choices in wordSet for appMode 'a-fake-one!'"
-      )
-    );
+    }).toThrow("Could not find a set of choices in wordSet for appMode 'a-fake-one!'");
   });
 
   describe('onChangeWord', () => {

test/unit/qualityTest.test.js

@@ -6,7 +6,7 @@ const {
   BodyShape
 } = require('@ml/utils/fishData');
 const {generateOcean, filterOcean} = require('@ml/utils/generateOcean');
-const SVMTrainer = require('@ml/utils/SVMTrainer');
+import SVMTrainer from '@ml/utils/SVMTrainer';
 import {AppMode, ClassType} from '@ml/oceans/constants';
 import {setState} from '@ml/oceans/state';
 

test/unit/utils/SVMTrainer.test.js

@@ -6,7 +6,7 @@ const {
   BodyShape
 } = require('@ml/utils/fishData');
 const {generateOcean, filterOcean} = require('@ml/utils/generateOcean');
-const SVMTrainer = require('@ml/utils/SVMTrainer');
+import SVMTrainer from '@ml/utils/SVMTrainer';
 import {ClassType} from '@ml/oceans/constants';
 
 const floatEquals = (a, b) => {

webpack.config.js

@@ -15,15 +15,17 @@ const commonConfig = {
   },
   output: {
     filename: '[name].js',
-    libraryTarget: 'umd'
+    library: {
+      type: 'umd'
+    }
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         loader: 'babel-loader'
       },
-      {test: /\.css$/, loader: 'style-loader!css-loader'},
+      {test: /\.css$/, use: ['style-loader', 'css-loader']},
       {
         test: /\.jsx$/,
         enforce: 'pre',
@@ -32,49 +34,28 @@ const commonConfig = {
           {
             loader: 'babel-loader',
             options: {
-              presets: ['react', 'env'],
-              plugins: ['transform-class-properties']
+              presets: ['@babel/preset-react', '@babel/preset-env'],
+              plugins: ['@babel/plugin-transform-class-properties']
             }
           }
         ]
       },
       {
         test: /\.(png|gif|svg)$/,
-        loader: 'url-loader',
-        options: {
-          limit: 8192,
-          outputPath: 'assets/images',
-          publicPath: 'images',
-          postTransformPublicPath: p =>
-            `__ml_activities_asset_public_path__ + ${p}`,
-          name: '[name].[ext]?[contenthash]'
-        }
+        type: 'asset/inline',
       },
       {
-        type: 'javascript/auto',
+        type: 'asset/resource',
         test: /src\/oceans\/model.json$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              outputPath: 'assets/models',
-              publicPath: 'models',
-              postTransformPublicPath: p =>
-                `__ml_activities_asset_public_path__ + ${p}`,
-              name: '[name].[ext]?[contenthash]'
-            }
-          }
-        ]
+        generator: {
+          filename: 'models/[name][ext]?[contenthash]'
+        }
       },
       {
         test: /\.(mp3|ogg|wav)$/,
-        loader: 'file-loader',
-        options: {
-          outputPath: 'assets/sounds',
-          publicPath: 'sounds',
-          postTransformPublicPath: p =>
-            `__ml_activities_asset_public_path__ + ${p}`,
-          name: '[name].[ext]?[contenthash]'
+        type: 'asset/resource',
+        generator: {
+          filename: 'sounds/[name][ext]?[contenthash]'
         }
       }
     ]
@@ -85,19 +66,25 @@ const commonConfig = {
     },
     maxAssetSize: 300000,
     maxEntrypointSize: 10500000
-  }
+  },
+  plugins: [
+    new (require('webpack').ProvidePlugin)({
+      process: 'process/browser'
+    })
+  ]
 };
 
 const firstConfigOnly = {
   plugins: [
     new CleanWebpackPlugin(),
-    new CopyPlugin([
-      {
-        from: 'src/oceans/*.bin',
-        to: 'assets/models/',
-        flatten: true
-      }
-    ])
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'src/oceans/*.bin',
+          to: 'models/[name][ext]'
+        }
+      ]
+    })
   ]
 };