summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.changeset/ninety-jars-swim.md5
-rw-r--r--packages/astro/test/fixtures/react-component/package.json5
-rw-r--r--packages/integrations/react/client-v17.js13
-rw-r--r--packages/integrations/react/client.js8
-rw-r--r--packages/integrations/react/package.json8
-rw-r--r--packages/integrations/react/server-v17.js67
-rw-r--r--packages/integrations/react/server.js2
-rw-r--r--packages/integrations/react/src/index.ts17
-rw-r--r--pnpm-lock.yaml20
9 files changed, 127 insertions, 18 deletions
diff --git a/.changeset/ninety-jars-swim.md b/.changeset/ninety-jars-swim.md
new file mode 100644
index 000000000..dd7c79c13
--- /dev/null
+++ b/.changeset/ninety-jars-swim.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/react': minor
+---
+
+Add support for React v18
diff --git a/packages/astro/test/fixtures/react-component/package.json b/packages/astro/test/fixtures/react-component/package.json
index 020549b3f..7ab49d4c0 100644
--- a/packages/astro/test/fixtures/react-component/package.json
+++ b/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"
}
}
diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js
new file mode 100644
index 000000000..a6bc7d3bc
--- /dev/null
+++ b/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
+ );
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index a6bc7d3bc..11d63cfcb 100644
--- a/packages/integrations/react/client.js
+++ b/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
+ )
);
diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json
index 64c79afe2..b1a2be46d 100644
--- a/packages/integrations/react/package.json
+++ b/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"
diff --git a/packages/integrations/react/server-v17.js b/packages/integrations/react/server-v17.js
new file mode 100644
index 000000000..1c0c41286
--- /dev/null
+++ b/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,
+};
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
index 1c0c41286..e102b57fe 100644
--- a/packages/integrations/react/server.js
+++ b/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');
diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index 128c6406d..2ea2dd5fb 100644
--- a/packages/integrations/react/src/index.ts
+++ b/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'],
},
};
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6fe40282..99da4e7df 100644
--- a/pnpm-lock.yaml
+++ b/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==}
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-04 19:06:39 +0000