fix(deps): update to React 19

development/client/components/Layout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {type JSX} from "react";
 
 import {Context, classNames} from "@reactivated";
 import {Helmet} from "react-helmet-async";

package.json

@@ -7,5 +7,8 @@
         "sample",
         "website",
         "development"
-    ]
+    ],
+    "overrides": {
+        "react": "^19.0.0"
+    }
 }

packages/reactivated/package.json

@@ -35,8 +35,8 @@
         "@types/eslint__js": "^8.42.3",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/express": "^5.0.0",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "@vanilla-extract/css": "^1.16.0",
         "@vanilla-extract/css-utils": "^0.1.4",
         "@vanilla-extract/dynamic": "^2.1.2",
@@ -57,8 +57,8 @@
         "jiti": "^2.4.1",
         "json-schema-to-typescript": "^15.0.2",
         "prettier": "^3.3.3",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "react-helmet-async": "^2.0.5",
         "terser": "^5.36.0",
         "ts-morph": "^24.0.0",

packages/reactivated/src/client.tsx

@@ -1,5 +1,5 @@
+import {hydrateRoot} from "react-dom/client";
 import React from "react";
-import {hydrate} from "react-dom";
 
 const props = (window as any).__PRELOADED_STATE__;
 
@@ -11,5 +11,10 @@ if ((module as any).hot) {
 const Template = require("client/templates/" + props.template_name + ".tsx").default;
 
 export const bootstrap = () => {
-    hydrate(<Template {...props} />, document.getElementById("root"));
+    const root = document.getElementById("root");
+    if (!root) {
+        console.error("div#root is missing!");
+        return;
+    }
+    hydrateRoot(root, <Template {...props} />);
 };

packages/reactivated/src/render.mts

@@ -1,7 +1,7 @@
 import {Request} from "express";
 import {HelmetProvider, HelmetServerState} from "react-helmet-async";
-import * as React from "react";
-import * as ReactDOMServer from "react-dom/server";
+import React, {type JSX} from "react";
+import ReactDOMServer from "react-dom/server";
 
 // @ts-ignore
 import {Provider} from "@reactivated";

website/client/forms.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {type JSX} from "react";
 
 import {FieldHandler, Widget} from "@reactivated";
 

website/client/templates/HomePage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {type JSX} from "react";
 
 import {templates} from "@reactivated";
 import {Helmet} from "react-helmet-async";