Support Bun by adjusting how @babel/plugin-transform-react-jsx is i…

…mported. (#8007) * Support bun/other tooling that respects `__esModule` * Add changeset file
withastro · Aug 9, 2023 · 58b121d · 58b121d
1 parent e65b5b5
commit 58b121d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/.changeset/quick-actors-sing.md b/.changeset/quick-actors-sing.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/preact': patch
+'astro': patch
+---
+
+Support Bun by adjusting how `@babel/plugin-transform-react-jsx` is imported.
diff --git a/packages/astro/src/jsx/renderer.ts b/packages/astro/src/jsx/renderer.ts
@@ -3,10 +3,9 @@ const renderer = {
 	serverEntrypoint: 'astro/jsx/server.js',
 	jsxImportSource: 'astro',
 	jsxTransformOptions: async () => {
-		const {
-			default: { default: jsx },
-			// @ts-expect-error
-		} = await import('@babel/plugin-transform-react-jsx');
+		// @ts-expect-error types not found
+		const plugin = await import('@babel/plugin-transform-react-jsx');
+		const jsx = plugin.default?.default ?? plugin.default;
 		const { default: astroJSX } = await import('./babel.js');
 		return {
 			plugins: [

diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
@@ -7,10 +7,9 @@ function getRenderer(development: boolean): AstroRenderer {
 		serverEntrypoint: '@astrojs/preact/server.js',
 		jsxImportSource: 'preact',
 		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 plugin = await import('@babel/plugin-transform-react-jsx');
+			const jsx = plugin.default?.default ?? plugin.default;
 			return {
 				plugins: [jsx({}, { runtime: 'automatic', importSource: 'preact' })],
 			};
@@ -25,10 +24,9 @@ function getCompatRenderer(development: boolean): AstroRenderer {
 		serverEntrypoint: '@astrojs/preact/server.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 plugin = await import('@babel/plugin-transform-react-jsx');
+			const jsx = plugin.default?.default ?? plugin.default;
 			return {
 				plugins: [
 					jsx({}, { runtime: 'automatic', importSource: 'preact/compat' }),