⬆️ [maykinmedia/open-api-framework#191] upgrade nodejs to v24

.github/workflows/code-quality.yml

@@ -21,6 +21,6 @@ jobs:
     with:
       apt-packages: 'libgdal-dev gdal-bin'
       python-version: '3.12'
-      node-version: '20'
+      node-version: '24'
       postgres-image: 'postgis/postgis:17-3.5'
       django-settings-module: 'objects.conf.ci'

.nvmrc

@@ -1 +1 @@
-20
+24

Dockerfile

@@ -20,7 +20,7 @@ RUN pip install -r requirements/production.txt
 
 
 # Stage 2 - build frontend
-FROM node:20-alpine AS frontend-build
+FROM node:24-alpine AS frontend-build
 
 WORKDIR /app
 

package.json

@@ -20,11 +20,11 @@
   "license": "UNLICENSED",
   "homepage": "https://maykinmedia.nl",
   "dependencies": {
-    "microscope-sass": "latest",
     "@fortawesome/fontawesome-free": "^7.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tough-cookie": "^4.1.4"
+    "microscope-sass": "latest",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tough-cookie": "^6.0.0"
   },
   "devDependencies": {
     "@babel/core": "latest",

src/objects/js/components/admin/permissions/index.js

@@ -1,23 +1,22 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from "react"; 
+import { createRoot } from "react-dom/client";
 
-import { PermissionForm } from "./permission-form";
 import { jsonScriptToVar } from "../../../utils";
+import { PermissionForm } from "./permission-form";
 
 const mount = () => {
     const node = document.getElementById('react-permissions');
     if (!node) return;
 
-
-    ReactDOM.render(
+    const root = createRoot(node);
+    root.render(
         <PermissionForm
             objectFields={jsonScriptToVar('object-fields')}
             tokenChoices={jsonScriptToVar('token-auth-choices')}
             objecttypeChoices={jsonScriptToVar('object-type-choices')}
             modeChoices={jsonScriptToVar('mode-choices')}
             formData={jsonScriptToVar('form-data')}
         />,
-        node
     );
 };
 

webpack.config.js

@@ -1,5 +1,5 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const argv = require('yargs').argv;
+const argv = require('yargs/yargs')(process.argv.slice(2)).argv;
 const paths = require('./build/paths');