Add support for React 18 in @astrojs/react (#2947)

* First pass at supporting React 18 in @astrojs/react

* Try marking React 18’s `react-dom/client` as external

* Try a different approach to importing different React versions

* Allow resolving JSON modules

* Revert "Allow resolving JSON modules"

This reverts commit 5279b7249c.

* Try the separate client entrypoint approach from #2946

* Clean up diff

* Trying to see something

* Just keep swimming… 🐠

* update to support react 18

* add changeset

* add docs

Co-authored-by: delucis <swithinbank@gmail.com>

.changeset/ninety-jars-swim.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': minor
+---
+
+Add support for React v18

packages/astro/test/fixtures/react-component/package.json

@@ -5,6 +5,9 @@
   "dependencies": {
     "@astrojs/react": "workspace:*",
     "@astrojs/vue": "workspace:*",
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "vue": "^3.2.31"
   }
 }

packages/integrations/react/client-v17.js

@@ -0,0 +1,13 @@
+import { createElement } from 'react';
+import { hydrate } from 'react-dom';
+import StaticHtml from './static-html.js';
+
+export default (element) => (Component, props, children) =>
+	hydrate(
+		createElement(
+			Component,
+			{ ...props, suppressHydrationWarning: true },
+			children != null ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) : children
+		),
+		element
+	);

packages/integrations/react/client.js

@@ -1,13 +1,13 @@
 import { createElement } from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import StaticHtml from './static-html.js';
 
 export default (element) => (Component, props, children) =>
-	hydrate(
+	hydrateRoot(
+		element,
 		createElement(
 			Component,
 			{ ...props, suppressHydrationWarning: true },
 			children != null ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) : children
-		),
-		element
+		)
 	);

packages/integrations/react/package.json

@@ -21,7 +21,9 @@
   "exports": {
     ".": "./dist/index.js",
     "./client.js": "./client.js",
+    "./client-v17.js": "./client-v17.js",
     "./server.js": "./server.js",
+    "./server-v17.js": "./server-v17.js",
     "./package.json": "./package.json",
     "./jsx-runtime": "./jsx-runtime.js"
   },
@@ -34,14 +36,16 @@
     "@babel/plugin-transform-react-jsx": "^7.17.3"
   },
   "devDependencies": {
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "engines": {
     "node": "^14.15.0 || >=16.0.0"

packages/integrations/react/server-v17.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import ReactDOM from 'react-dom/server.js';
+import StaticHtml from './static-html.js';
+
+const reactTypeof = Symbol.for('react.element');
+
+function errorIsComingFromPreactComponent(err) {
+	return err.message && (err.message.startsWith("Cannot read property '__H'") || err.message.includes("(reading '__H')"));
+}
+
+function check(Component, props, children) {
+	// Note: there are packages that do some unholy things to create "components".
+	// Checking the $$typeof property catches most of these patterns.
+	if (typeof Component === 'object') {
+		const $$typeof = Component['$$typeof'];
+		return $$typeof && $$typeof.toString().slice('Symbol('.length).startsWith('react');
+	}
+	if (typeof Component !== 'function') return false;
+
+	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
+		return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);
+	}
+
+	let error = null;
+	let isReactComponent = false;
+	function Tester(...args) {
+		try {
+			const vnode = Component(...args);
+			if (vnode && vnode['$$typeof'] === reactTypeof) {
+				isReactComponent = true;
+			}
+		} catch (err) {
+			if (!errorIsComingFromPreactComponent(err)) {
+				error = err;
+			}
+		}
+
+		return React.createElement('div');
+	}
+
+	renderToStaticMarkup(Tester, props, children, {});
+
+	if (error) {
+		throw error;
+	}
+	return isReactComponent;
+}
+
+function renderToStaticMarkup(Component, props, children, metadata) {
+	delete props['class'];
+	const vnode = React.createElement(Component, {
+		...props,
+		children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined,
+	});
+	let html;
+	if (metadata && metadata.hydrate) {
+		html = ReactDOM.renderToString(vnode);
+	} else {
+		html = ReactDOM.renderToStaticMarkup(vnode);
+	}
+	return { html };
+}
+
+export default {
+	check,
+	renderToStaticMarkup,
+};

packages/integrations/react/server.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/server.js';
+import ReactDOM from 'react-dom/server';
 import StaticHtml from './static-html.js';
 
 const reactTypeof = Symbol.for('react.element');

packages/integrations/react/src/index.ts

@@ -1,10 +1,11 @@
 import { AstroIntegration } from 'astro';
+import { version as ReactVersion } from 'react-dom';
 
 function getRenderer() {
 	return {
 		name: '@astrojs/react',
-		clientEntrypoint: '@astrojs/react/client.js',
-		serverEntrypoint: '@astrojs/react/server.js',
+		clientEntrypoint: ReactVersion.startsWith('18.') ? '@astrojs/react/client.js' : '@astrojs/react/client-v17.js',
+		serverEntrypoint: ReactVersion.startsWith('18.') ? '@astrojs/react/server.js' : '@astrojs/react/server-v17.js',
 		jsxImportSource: 'react',
 		jsxTransformOptions: async () => {
 			const {
@@ -17,7 +18,11 @@ function getRenderer() {
 						{},
 						{
 							runtime: 'automatic',
-							importSource: '@astrojs/react',
+							// This option tells the JSX transform how to construct the "*/jsx-runtime" import.
+							// In React v17, we had to shim this due to an export map issue in React.
+							// In React v18, this issue was fixed and we can import "react/jsx-runtime" directly.
+							// See `./jsx-runtime.js` for more details.
+							importSource: ReactVersion.startsWith('18.') ? 'react' : '@astrojs/react',
 						}
 					),
 				],
@@ -29,14 +34,14 @@ function getRenderer() {
 function getViteConfiguration() {
 	return {
 		optimizeDeps: {
-			include: ['@astrojs/react/client.js', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'],
-			exclude: ['@astrojs/react/server.js'],
+			include: [ReactVersion.startsWith('18.') ? '@astrojs/react/client.js' : '@astrojs/react/client-v17.js', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'],
+			exclude: [ReactVersion.startsWith('18.') ? '@astrojs/react/server.js' : '@astrojs/react/server-v17.js'], 
 		},
 		resolve: {
 			dedupe: ['react', 'react-dom'],
 		},
 		ssr: {
-			external: ['react-dom/server.js'],
+			external: ReactVersion.startsWith('18.') ? ['react-dom/server', 'react-dom/client'] : ['react-dom/server.js', 'react-dom/client.js'],
 		},
 	};
 }

pnpm-lock.yaml

@@ -1011,10 +1011,16 @@ importers:
       '@astrojs/react': workspace:*
       '@astrojs/vue': workspace:*
       astro: workspace:*
+      react: ^17.0.2
+      react-dom: ^17.0.2
+      vue: ^3.2.31
     dependencies:
       '@astrojs/react': link:../../../../integrations/react
       '@astrojs/vue': link:../../../../integrations/vue
       astro: link:../../..
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      vue: 3.2.31
 
   packages/astro/test/fixtures/remote-css:
     specifiers:
@@ -1276,6 +1282,8 @@ importers:
   packages/integrations/react:
     specifiers:
       '@babel/plugin-transform-react-jsx': ^7.17.3
+      '@types/react': ^17.0.43
+      '@types/react-dom': ^17.0.14
       astro: workspace:*
       astro-scripts: workspace:*
       react: ^17.0.2
@@ -1283,6 +1291,8 @@ importers:
     dependencies:
       '@babel/plugin-transform-react-jsx': 7.17.3
     devDependencies:
+      '@types/react': 17.0.43
+      '@types/react-dom': 17.0.14
       astro: link:../../astro
       astro-scripts: link:../../../scripts
       react: 17.0.2
@@ -4009,19 +4019,23 @@ packages:
 
   /@types/prop-types/15.7.4:
     resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==}
-    dev: false
 
   /@types/pug/2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: false
 
+  /@types/react-dom/17.0.14:
+    resolution: {integrity: sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==}
+    dependencies:
+      '@types/react': 17.0.43
+    dev: true
+
   /@types/react/17.0.43:
     resolution: {integrity: sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==}
     dependencies:
       '@types/prop-types': 15.7.4
       '@types/scheduler': 0.16.2
       csstype: 3.0.11
-    dev: false
 
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
@@ -4053,7 +4067,6 @@ packages:
 
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
-    dev: false
 
   /@types/semver/6.2.3:
     resolution: {integrity: sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==}
@@ -5236,7 +5249,6 @@ packages:
 
   /csstype/3.0.11:
     resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
-    dev: false
 
   /csv-generate/3.4.3:
     resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}