enhance: React 19 JSX compatibility (#3071)

Author: ntucker

.changeset/thick-walls-act.md

@@ -0,0 +1,15 @@
+---
+'@data-client/use-enhanced-reducer': patch
+'@data-client/hooks': patch
+'@data-client/react': patch
+'@data-client/redux': patch
+'@data-client/test': patch
+'@data-client/img': patch
+'@data-client/ssr': patch
+---
+
+React 19 JSX runtime compatibility.
+
+BREAKING CHANGE: Min React version 16.8.4 -> 16.14
+
+16.14 is the first version of React to include JSX runtime.

babel.config.js

@@ -9,6 +9,7 @@ module.exports = function (api) {
       [
         '@anansi',
         {
+          hasJsxRuntime: true,
           loose: true,
           resolver: {
             resolvePath(sourcePath, currentFile, opts) {

packages/hooks/package.json

@@ -77,8 +77,8 @@
     "@data-client/normalizr": "^0.12.3"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.4 || ^17.0.0 || ^18.0.0-0 || ^19.0.0",
-    "react": "^16.8.4 || ^17.0.0 || ^18.0.0-0 || ^19.0.0"
+    "@types/react": "^16.14.0 || ^17.0.0 || ^18.0.0-0 || ^19.0.0",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0-0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/img/package.json

@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@data-client/react": "^0.1.0 || ^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0",
-    "@types/react": "^16.8.4 || ^17.0.0 || ^18.0.0-0 || ^19.0.0",
-    "react": "^16.8.4 || ^17.0.0 || ^18.0.0-0 || ^19.0.0"
+    "@types/react": "^16.14.0 || ^17.0.0 || ^18.0.0-0 || ^19.0.0",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0-0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/img/src/Img.tsx

@@ -1,5 +1,6 @@
 import { useSuspense } from '@data-client/react';
 import React from 'react';
+import type { JSX } from 'react';
 
 import getImage from './getImage.js';
 

packages/react/package.json

@@ -133,8 +133,8 @@
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",
-    "@types/react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@types/react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@react-navigation/native": {

packages/react/src/components/AsyncBoundary.tsx

@@ -1,4 +1,5 @@
 import React, { memo, Suspense } from 'react';
+import type { JSX } from 'react';
 
 import ErrorBoundary, { ErrorBoundaryProps } from './ErrorBoundary.js';
 

packages/react/src/components/CacheProvider.tsx

@@ -9,6 +9,7 @@ import {
 } from '@data-client/core';
 import type { State, Manager } from '@data-client/core';
 import React, { useMemo, useRef } from 'react';
+import type { JSX } from 'react';
 
 import CacheStore from './CacheStore.js';
 import type { DevToolsPosition } from './DevToolsButton.js';
@@ -51,7 +52,8 @@ Try using https://dataclient.io/docs/api/ExternalCacheProvider for server entry
     );
   }
   // contents of this component expected to be relatively stable
-  const controllerRef: React.MutableRefObject<DataController> = useRef<any>();
+  const controllerRef: React.MutableRefObject<DataController> =
+    useRef<any>(undefined);
   if (!controllerRef.current) controllerRef.current = new Controller();
   //TODO: bind all methods so destructuring works
 

packages/react/src/components/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 
 import ErrorFallback from './ErrorFallback.js';
 

packages/react/src/components/UniversalSuspense.tsx

@@ -1,4 +1,5 @@
 import React, { Suspense } from 'react';
+import type { JSX } from 'react';
 
 import { LegacyReact, SSR } from './LegacyReact.js';