diff --git a/.changeset/fuzzy-peas-nail.md b/.changeset/fuzzy-peas-nail.md
new file mode 100644
index 000000000..969d58bb5
--- /dev/null
+++ b/.changeset/fuzzy-peas-nail.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-react': patch
+---
+
+Fix for using the React renderer with the static build
diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx b/packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx
new file mode 100644
index 000000000..9422ac0a1
--- /dev/null
+++ b/packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx
@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export default function Counter({ children }) {
+ const [count, setCount] = useState(0);
+ const add = () => setCount((i) => i + 1);
+ const subtract = () => setCount((i) => i - 1);
+
+ return (
+ <>
+
+ {children}
+
+ );
+}
diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro b/packages/astro/test/fixtures/static-build-frameworks/src/pages/preact.astro
similarity index 100%
rename from packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro
rename to packages/astro/test/fixtures/static-build-frameworks/src/pages/preact.astro
diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro b/packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro
new file mode 100644
index 000000000..0a1c32e4f
--- /dev/null
+++ b/packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro
@@ -0,0 +1,12 @@
+---
+import RCounter from '../components/RCounter.jsx';
+---
+
+
+Testing
+
+
+Testing
+
+
+
diff --git a/packages/astro/test/static-build-frameworks.test.js b/packages/astro/test/static-build-frameworks.test.js
index a3706d7e7..f653aa8fe 100644
--- a/packages/astro/test/static-build-frameworks.test.js
+++ b/packages/astro/test/static-build-frameworks.test.js
@@ -2,17 +2,16 @@ import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
-function addLeadingSlash(path) {
- return path.startsWith('/') ? path : '/' + path;
-}
-
describe('Static build - frameworks', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/static-build-frameworks/',
- renderers: ['@astrojs/renderer-preact'],
+ renderers: [
+ '@astrojs/renderer-preact',
+ '@astrojs/renderer-react'
+ ],
buildOptions: {
experimentalStaticBuild: true,
},
@@ -21,7 +20,12 @@ describe('Static build - frameworks', () => {
});
it('can build preact', async () => {
- const html = await fixture.readFile('/index.html');
+ const html = await fixture.readFile('/preact/index.html');
+ expect(html).to.be.a('string');
+ });
+
+ it('can build react', async () => {
+ const html = await fixture.readFile('/react/index.html');
expect(html).to.be.a('string');
});
});
diff --git a/packages/renderers/renderer-react/index.js b/packages/renderers/renderer-react/index.js
index e73dd622a..a3cedcf07 100644
--- a/packages/renderers/renderer-react/index.js
+++ b/packages/renderers/renderer-react/index.js
@@ -8,7 +8,10 @@ export default {
default: { default: jsx },
} = await import('@babel/plugin-transform-react-jsx');
return {
- plugins: [jsx({}, { runtime: 'automatic', importSource: 'react' })],
+ plugins: [jsx({}, {
+ runtime: 'automatic',
+ importSource: '@astrojs/renderer-react'
+ })],
};
},
viteConfig() {
diff --git a/packages/renderers/renderer-react/jsx-runtime.js b/packages/renderers/renderer-react/jsx-runtime.js
new file mode 100644
index 000000000..1df555fc0
--- /dev/null
+++ b/packages/renderers/renderer-react/jsx-runtime.js
@@ -0,0 +1,12 @@
+// This module is a simple wrapper around react/jsx-runtime so that
+// it can run in Node ESM. 'react' doesn't declare this module as an export map
+// So we have to use the .js. The .js is not added via the babel automatic JSX transform
+// hence this module as a workaround.
+import jsxr from 'react/jsx-runtime.js';
+const { jsx, jsxs, Fragment } = jsxr;
+
+export {
+ jsx,
+ jsxs,
+ Fragment
+};
diff --git a/packages/renderers/renderer-react/package.json b/packages/renderers/renderer-react/package.json
index c8e02ad2f..b462a120e 100644
--- a/packages/renderers/renderer-react/package.json
+++ b/packages/renderers/renderer-react/package.json
@@ -17,7 +17,8 @@
"./*": "./*",
"./client.js": "./client.js",
"./server.js": "./server.js",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./jsx-runtime": "./jsx-runtime.js"
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.16.0",