diff --git a/.changeset/metal-dodos-sin.md b/.changeset/metal-dodos-sin.md
new file mode 100644
index 000000000..3ff403592
--- /dev/null
+++ b/.changeset/metal-dodos-sin.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/mdx': patch
+'@astrojs/react': patch
+---
+
+Allows using React with automatic imports alongside MDX
diff --git a/packages/integrations/mdx/test/fixtures/mdx-plus-react/astro.config.mjs b/packages/integrations/mdx/test/fixtures/mdx-plus-react/astro.config.mjs
new file mode 100644
index 000000000..4671227d3
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-plus-react/astro.config.mjs
@@ -0,0 +1,6 @@
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+
+export default {
+ integrations: [react(), mdx()]
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-plus-react/package.json b/packages/integrations/mdx/test/fixtures/mdx-plus-react/package.json
new file mode 100644
index 000000000..982f4c685
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-plus-react/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "@test/mdx-plus-react",
+ "dependencies": {
+ "astro": "workspace:*",
+ "@astrojs/mdx": "workspace:*",
+ "@astrojs/react": "workspace:*"
+ }
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-plus-react/src/components/Component.jsx b/packages/integrations/mdx/test/fixtures/mdx-plus-react/src/components/Component.jsx
new file mode 100644
index 000000000..53f5dad3f
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-plus-react/src/components/Component.jsx
@@ -0,0 +1,5 @@
+const Component = () => {
+ return Hello world
;
+};
+
+export default Component;
diff --git a/packages/integrations/mdx/test/fixtures/mdx-plus-react/src/pages/index.astro b/packages/integrations/mdx/test/fixtures/mdx-plus-react/src/pages/index.astro
new file mode 100644
index 000000000..2486e7834
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-plus-react/src/pages/index.astro
@@ -0,0 +1,11 @@
+---
+import Component from "../components/Component.jsx";
+---
+
+
+ Testing
+
+
+
+
+
diff --git a/packages/integrations/mdx/test/mdx-plus-react.test.js b/packages/integrations/mdx/test/mdx-plus-react.test.js
new file mode 100644
index 000000000..49c25d558
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-plus-react.test.js
@@ -0,0 +1,25 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX and React', () => {
+ let fixture;
+
+ before(async () => {
+ fixture = await loadFixture({
+ root: new URL('./fixtures/mdx-plus-react/', import.meta.url),
+ });
+ await fixture.build();
+ });
+
+ it('can be used in the same project', async () => {
+ const html = await fixture.readFile('/index.html');
+ const { document } = parseHTML(html);
+
+ const p = document.querySelector('p');
+
+ expect(p.textContent).to.equal('Hello world');
+ });
+});
diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index a283938c3..4ae6ea77f 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -12,10 +12,9 @@ function getRenderer() {
: '@astrojs/react/server-v17.js',
jsxImportSource: 'react',
jsxTransformOptions: async () => {
- const {
- default: { default: jsx },
- // @ts-expect-error types not found
- } = await import('@babel/plugin-transform-react-jsx');
+ // @ts-expect-error types not found
+ const babelPluginTransformReactJsxModule = await import('@babel/plugin-transform-react-jsx');
+ const jsx = babelPluginTransformReactJsxModule?.default?.default ?? babelPluginTransformReactJsxModule?.default;
return {
plugins: [
jsx(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85a6b95ed..f4ef7cc2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2220,6 +2220,16 @@ importers:
'@astrojs/mdx': link:../../..
astro: link:../../../../../astro
+ packages/integrations/mdx/test/fixtures/mdx-plus-react:
+ specifiers:
+ '@astrojs/mdx': workspace:*
+ '@astrojs/react': workspace:*
+ astro: workspace:*
+ dependencies:
+ '@astrojs/mdx': link:../../..
+ '@astrojs/react': link:../../../../react
+ astro: link:../../../../../astro
+
packages/integrations/netlify:
specifiers:
'@astrojs/webapi': ^0.12.0