feat: Node 24, React 19.2 compatibility, ... (#158)

Closes #157

### Summary of changes

- Updates the minimum Node version to 24
- Allows both React 18 and React 19.2
- Updates ESLint rules to latest react plugins
- Adds https://github.com/devoto13/yarn-plugin-engines to enforce Node
version compatibility


### Migration of repo

- Bump the `engines.node` key in the package.json to `>=24`
- Run `yarn set version berry` to update yarn
- Run `yarn plugin import
https://raw.githubusercontent.com/devoto13/yarn-plugin-engines/main/bundles/%40yarnpkg/plugin-engines.js`
to enfore this upon installing
- Use all `node24` branches as overrides, run `yarn && yarn start` and
verify everything works
- Upgrade from `node:20.9-bullseye` to `node:24.9-bullseye` in all files
in `deploy/build/*`

### Migration of dev environments

- Use `nvm use 24` and `nvm alias default 24` to ensure you are using
Node 24

### Screenshots


### Additional notes for the reviewer(s)

-  
Thanks for creating this pull request 🤗

Author: puehringer

.yarn/plugins/@yarnpkg/plugin-engines.cjs

@@ -0,0 +1,9 @@
+/* eslint-disable */
+//prettier-ignore
+module.exports = {
+name: "@yarnpkg/plugin-engines",
+factory: function (require) {
+var plugin=(()=>{var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var s=(o=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(o,{get:(r,t)=>(typeof require<"u"?require:r)[t]}):o)(function(o){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+o+'" is not supported')});var k=(o,r)=>{for(var t in r)m(o,t,{get:r[t],enumerable:!0})},j=(o,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of N(r))!P.call(o,n)&&n!==t&&m(o,n,{get:()=>r[n],enumerable:!(e=C(r,n))||e.enumerable});return o};var V=o=>j(m({},"__esModule",{value:!0}),o);var T={};k(T,{default:()=>S});var i=s("@yarnpkg/core");var p=class{constructor(r){this.throwWrongEngineError=(r,t)=>{let e=this.formatErrorMessage(r,t);this.throwError(e)};this.throwError=r=>{switch(this.errorReporter){case"Yarn":this.reportYarnError(r);break;case"Console":default:this.reportConsoleError(r);break}};this.reportYarnError=r=>{throw new i.ReportError(i.MessageName.UNNAMED,r)};this.reportConsoleError=r=>{console.error(r),process.exit(1)};this.formatErrorMessage=(r,t)=>{let{configuration:e}=this.project,n=i.formatUtils.applyStyle(e,i.formatUtils.pretty(e,this.engine,"green"),2),c=i.formatUtils.pretty(e,r,"cyan"),g=i.formatUtils.pretty(e,t,"cyan"),l=`The current ${n} version ${c} does not satisfy the required version ${g}.`;return i.formatUtils.pretty(e,l,"red")};this.project=r.project,this.errorReporter=r.errorReporter}};var f=s("fs"),v=s("path"),h=s("semver"),y=s("@yarnpkg/fslib"),a=s("@yarnpkg/core");var Y=".nvmrc",b=".node-version",d=class extends p{constructor(){super(...arguments);this.resolveNodeFromFileRequiredVersion=t=>{let{configuration:e,cwd:n}=this.project,c=(0,v.resolve)(y.npath.fromPortablePath(n),t),g=a.formatUtils.applyStyle(e,a.formatUtils.pretty(e,this.engine,"green"),2);if(!(0,f.existsSync)(c)){this.throwError(a.formatUtils.pretty(e,`Unable to verify the ${g} version. The ${t} file does not exist.`,"red"));return}let l=(0,f.readFileSync)(c,"utf-8").trim();if((0,h.validRange)(l))return l;let w=a.formatUtils.pretty(e,t,"yellow");this.throwError(a.formatUtils.pretty(e,`Unable to verify the ${g} version. The ${w} file contains an invalid semver range.`,"red"))}}get engine(){return"Node"}verifyEngine(t){let e=t.node;e!=null&&([Y,b].forEach(n=>{e===n&&(e=this.resolveNodeFromFileRequiredVersion(n))}),(0,h.satisfies)(process.version,e,{includePrerelease:!0})||this.throwWrongEngineError(process.version.replace(/^v/i,""),e.replace(/^v/i,"")))}};var R=s("semver"),u=s("@yarnpkg/core");var E=class extends p{get engine(){return"Yarn"}verifyEngine(r){let t=r.yarn;t!=null&&((0,R.satisfies)(u.YarnVersion,t,{includePrerelease:!0})||this.throwWrongEngineError(u.YarnVersion,t))}};var x=o=>r=>{if(process.env.PLUGIN_YARN_ENGINES_DISABLE!=null)return;let{engines:t={}}=r.getWorkspaceByCwd(r.cwd).manifest.raw,e={project:r,errorReporter:o};[new d(e),new E(e)].forEach(c=>c.verifyEngine(t))},F={hooks:{validateProject:x("Yarn"),setupScriptEnvironment:x("Console")}},S=F;return V(T);})();
+return plugin;
+}
+};

.yarn/releases/yarn-4.10.3.cjs

@@ -1,3 +1,8 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+plugins:
+  - checksum: e5e6e2885ab0e6521b70b0af7c6d8ca2c75dcae2403706fc4600a783b339a6530a476dafb9450c9436ca4050eb6bdee9b62e6e2cebfecf1e81dd709a2480dc07
+    path: .yarn/plugins/@yarnpkg/plugin-engines.cjs
+    spec: "https://raw.githubusercontent.com/devoto13/yarn-plugin-engines/main/bundles/%40yarnpkg/plugin-engines.js"
+
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

.yarn/releases/yarn-4.6.0.cjs

@@ -7,6 +7,7 @@ module.exports = ({ tsconfigRootDir, optimizeImports = true }) => ({
     'eslint:recommended',
     'plugin:import/recommended',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended-legacy',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     // 'plugin:lodash/recommended',

.yarnrc.yml

@@ -252,7 +252,6 @@ module.exports = (webpackEnv, argv) => {
               exclude: [/node_modules/],
               loader: 'builtin:swc-loader',
               options: {
-                sourceMap: true,
                 jsc: {
                   parser: {
                     syntax: 'typescript',
@@ -277,7 +276,6 @@ module.exports = (webpackEnv, argv) => {
               test: /\.(ts|tsx)$/,
               loader: 'builtin:swc-loader',
               options: {
-                sourceMap: true,
                 jsc: {
                   parser: {
                     syntax: 'typescript',

config/eslintrc.template.js

@@ -24,6 +24,9 @@
     "visyn": "./bin/visyn_scripts.js",
     "visyn_scripts": "./bin/visyn_scripts.js"
   },
+  "engines": {
+    "node": ">=24"
+  },
   "scripts": {
     "lint": "eslint bin/**/*.js config/**/*.js tests/**/*.js",
     "lint:fix": "eslint --fix bin/**/*.js config/**/*.js tests/**/*.js",
@@ -34,25 +37,25 @@
   },
   "dependencies": {
     "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
-    "@rsbuild/core": "1.2.0",
-    "@rsbuild/plugin-node-polyfill": "^1.4.0",
-    "@rsbuild/plugin-react": "^1.1.0",
-    "@rsbuild/plugin-sass": "^1.2.0",
-    "@rsdoctor/cli": "^0.4.13",
-    "@rsdoctor/rspack-plugin": "^0.4.13",
-    "@rspack/cli": "~1.2.0",
-    "@rspack/core": "~1.2.0",
+    "@rsbuild/core": "1.5.13",
+    "@rsbuild/plugin-node-polyfill": "^1.4.2",
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rsbuild/plugin-sass": "^1.4.0",
+    "@rsdoctor/cli": "^1.3.1",
+    "@rsdoctor/rspack-plugin": "^1.3.1",
+    "@rspack/cli": "~1.5.8",
+    "@rspack/core": "~1.5.8",
     "@rspack/plugin-minify": "~0.7.5",
-    "@rspack/plugin-react-refresh": "~1.0.1",
-    "@stylistic/eslint-plugin": "^2.13.0",
-    "@swc/core": "~1.10.9",
-    "@swc/helpers": "~0.5.15",
+    "@rspack/plugin-react-refresh": "~1.5.1",
+    "@stylistic/eslint-plugin": "^5.4.0",
+    "@swc/core": "~1.13.5",
+    "@swc/helpers": "~0.5.17",
     "@swc/jest": "~0.2.37",
     "@types/jest": "~27.4.1",
-    "@types/node": "^20.17.14",
+    "@types/node": "^24.6.2",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "~8.21.0",
-    "dotenv": "^16.4.7",
+    "@typescript-eslint/parser": "~8.45.0",
+    "dotenv": "^17.2.3",
     "dotenv-expand": "^12.0.1",
     "dotenv-webpack": "^8.1.0",
     "eslint": "^8.57.1",
@@ -66,11 +69,11 @@
     "eslint-plugin-playwright": "^2.1.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-decd7b8-20250118",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^6.1.1",
     "eslint-plugin-unused-imports": "^4.1.4",
     "fs-extra": "^11.3.0",
-    "glob": "^10.0.0",
+    "glob": "^11.0.3",
     "html-loader": "~5.1.0",
     "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
@@ -84,16 +87,16 @@
     "postcss-preset-env": "^10.1.3",
     "prettier": "^3.4.2",
     "react-dev-utils": "^12.0.1",
-    "react-refresh": "^0.16.0",
+    "react-refresh": "^0.18.0",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "~6.0.1",
     "sass-loader": "^16.0.4",
-    "shx": "~0.3.4",
+    "shx": "~0.4.0",
     "tailwindcss": "^3.4.17",
     "ts-checker-rspack-plugin": "^1.1.1",
     "ts-node": "^10.9.2",
     "tslib": "~2.8.1",
-    "typescript": "~5.7.3",
+    "typescript": "~5.9.3",
     "util": "^0.12.5",
     "webpack": "^5.97.1",
     "yargs": "^17.7.2"
@@ -103,18 +106,18 @@
     "http-server": "^14.1.1",
     "jest-dev-server": "^6.2.0",
     "storybook": "^8.5.0",
-    "storybook-react-rsbuild": "^0.1.8"
+    "storybook-react-rsbuild": "^1.0.3"
   },
   "peerDependencies": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@types/react": "^18 || ~19.2.0",
+    "@types/react-dom": "^18 || ~19.2.0",
+    "react": "^18 || ~19.2.0",
+    "react-dom": "^18 || ~19.2.0"
   },
   "jest": {
     "testPathIgnorePatterns": [
       "/node_modules/|/bin/|/tests_fixtures/"
     ]
   },
-  "packageManager": "yarn@4.6.0"
+  "packageManager": "yarn@4.10.3"
 }

config/rspack.config.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+//prettier-ignore
+module.exports = {
+name: "@yarnpkg/plugin-engines",
+factory: function (require) {
+var plugin=(()=>{var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var s=(o=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(o,{get:(r,t)=>(typeof require<"u"?require:r)[t]}):o)(function(o){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+o+'" is not supported')});var k=(o,r)=>{for(var t in r)m(o,t,{get:r[t],enumerable:!0})},j=(o,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of N(r))!P.call(o,n)&&n!==t&&m(o,n,{get:()=>r[n],enumerable:!(e=C(r,n))||e.enumerable});return o};var V=o=>j(m({},"__esModule",{value:!0}),o);var T={};k(T,{default:()=>S});var i=s("@yarnpkg/core");var p=class{constructor(r){this.throwWrongEngineError=(r,t)=>{let e=this.formatErrorMessage(r,t);this.throwError(e)};this.throwError=r=>{switch(this.errorReporter){case"Yarn":this.reportYarnError(r);break;case"Console":default:this.reportConsoleError(r);break}};this.reportYarnError=r=>{throw new i.ReportError(i.MessageName.UNNAMED,r)};this.reportConsoleError=r=>{console.error(r),process.exit(1)};this.formatErrorMessage=(r,t)=>{let{configuration:e}=this.project,n=i.formatUtils.applyStyle(e,i.formatUtils.pretty(e,this.engine,"green"),2),c=i.formatUtils.pretty(e,r,"cyan"),g=i.formatUtils.pretty(e,t,"cyan"),l=`The current ${n} version ${c} does not satisfy the required version ${g}.`;return i.formatUtils.pretty(e,l,"red")};this.project=r.project,this.errorReporter=r.errorReporter}};var f=s("fs"),v=s("path"),h=s("semver"),y=s("@yarnpkg/fslib"),a=s("@yarnpkg/core");var Y=".nvmrc",b=".node-version",d=class extends p{constructor(){super(...arguments);this.resolveNodeFromFileRequiredVersion=t=>{let{configuration:e,cwd:n}=this.project,c=(0,v.resolve)(y.npath.fromPortablePath(n),t),g=a.formatUtils.applyStyle(e,a.formatUtils.pretty(e,this.engine,"green"),2);if(!(0,f.existsSync)(c)){this.throwError(a.formatUtils.pretty(e,`Unable to verify the ${g} version. The ${t} file does not exist.`,"red"));return}let l=(0,f.readFileSync)(c,"utf-8").trim();if((0,h.validRange)(l))return l;let w=a.formatUtils.pretty(e,t,"yellow");this.throwError(a.formatUtils.pretty(e,`Unable to verify the ${g} version. The ${w} file contains an invalid semver range.`,"red"))}}get engine(){return"Node"}verifyEngine(t){let e=t.node;e!=null&&([Y,b].forEach(n=>{e===n&&(e=this.resolveNodeFromFileRequiredVersion(n))}),(0,h.satisfies)(process.version,e,{includePrerelease:!0})||this.throwWrongEngineError(process.version.replace(/^v/i,""),e.replace(/^v/i,"")))}};var R=s("semver"),u=s("@yarnpkg/core");var E=class extends p{get engine(){return"Yarn"}verifyEngine(r){let t=r.yarn;t!=null&&((0,R.satisfies)(u.YarnVersion,t,{includePrerelease:!0})||this.throwWrongEngineError(u.YarnVersion,t))}};var x=o=>r=>{if(process.env.PLUGIN_YARN_ENGINES_DISABLE!=null)return;let{engines:t={}}=r.getWorkspaceByCwd(r.cwd).manifest.raw,e={project:r,errorReporter:o};[new d(e),new E(e)].forEach(c=>c.verifyEngine(t))},F={hooks:{validateProject:x("Yarn"),setupScriptEnvironment:x("Console")}},S=F;return V(T);})();
+return plugin;
+}
+};