Build: Require explicit JSX file extensions

packages/wp-build/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   `@wordpress/build` no longer parses JSX syntax in `.js` source files. Rename these files to `.jsx` or `.tsx` before building ([#82189](https://github.com/WordPress/gutenberg/pull/82189)).
+
 ### Enhancements
 
 -   Target `@wordpress/browserslist-config` for JavaScript and CSS when the project has no Browserslist config, instead of Browserslist's implicit defaults ([#82179](https://github.com/WordPress/gutenberg/pull/82179)).

packages/wp-build/README.md

@@ -12,6 +12,9 @@ Build tool for WordPress plugins.
 -   **PHP Generation**: Automatically generates PHP registration files for scripts, modules, and styles
 -   **Watch Mode**: Incremental rebuilds during development
 
+JSX syntax must use a `.jsx` or `.tsx` file extension. Files ending in `.js`
+use esbuild's standard JavaScript loader and cannot contain JSX.
+
 ## Installation
 
 ```bash

packages/wp-build/lib/build.mjs

@@ -1489,7 +1489,6 @@ async function transpilePackage( packageName ) {
 				target,
 				jsx: 'automatic',
 				jsxImportSource: 'react',
-				loader: { '.js': 'jsx' },
 				plugins,
 			} )
 		);
@@ -1523,7 +1522,6 @@ async function transpilePackage( packageName ) {
 				target,
 				jsx: 'automatic',
 				jsxImportSource: 'react',
-				loader: { '.js': 'jsx' },
 				plugins,
 			} )
 		);

packages/wp-build/lib/test/jsx-extensions.js

@@ -0,0 +1,85 @@
+import {
+	existsSync,
+	mkdirSync,
+	mkdtempSync,
+	rmSync,
+	writeFileSync,
+} from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+
+describe( 'JSX source extensions', () => {
+	let temporaryDirectory;
+
+	beforeEach( () => {
+		temporaryDirectory = mkdtempSync(
+			path.join( os.tmpdir(), 'wordpress-build-jsx-extensions-' )
+		);
+	} );
+
+	afterEach( () => {
+		rmSync( temporaryDirectory, { force: true, recursive: true } );
+	} );
+
+	function buildProject( sourceFilename ) {
+		const sourceDirectory = path.join(
+			temporaryDirectory,
+			'packages/example/src'
+		);
+		mkdirSync( sourceDirectory, { recursive: true } );
+
+		writeFileSync(
+			path.join( temporaryDirectory, 'package.json' ),
+			JSON.stringify( {
+				name: 'wp-build-jsx-extensions-test',
+				version: '1.0.0',
+				wpPlugin: { name: 'wp_build_jsx_extensions_test' },
+			} )
+		);
+		writeFileSync(
+			path.join( temporaryDirectory, 'packages/example/package.json' ),
+			JSON.stringify( {
+				name: '@test/example',
+				version: '1.0.0',
+				module: './build-module/index.mjs',
+			} )
+		);
+		writeFileSync(
+			path.join( sourceDirectory, sourceFilename ),
+			'export default <div />;\n'
+		);
+
+		return spawnSync(
+			process.execPath,
+			[ path.resolve( __dirname, '../build.mjs' ) ],
+			{
+				cwd: temporaryDirectory,
+				encoding: 'utf8',
+			}
+		);
+	}
+
+	it( 'builds JSX from a .jsx source file', () => {
+		const result = buildProject( 'index.jsx' );
+
+		expect( result.status ).toBe( 0 );
+		expect(
+			existsSync(
+				path.join(
+					temporaryDirectory,
+					'packages/example/build-module/index.mjs'
+				)
+			)
+		).toBe( true );
+	} );
+
+	it( 'rejects JSX syntax in a .js source file', () => {
+		const result = buildProject( 'index.js' );
+
+		expect( result.status ).not.toBe( 0 );
+		expect( `${ result.stdout }${ result.stderr }` ).toContain(
+			'The JSX syntax extension is not currently enabled'
+		);
+	} );
+} );

packages/wp-build/lib/worker-build.mjs

@@ -333,7 +333,6 @@ export const workerCode = ${ JSON.stringify( workerContent ) };
 				target,
 				jsx: 'automatic',
 				jsxImportSource: 'react',
-				loader: { '.js': 'jsx' },
 				plugins,
 			} )
 		);
@@ -356,7 +355,6 @@ export const workerCode = ${ JSON.stringify( workerContent ) };
 				target,
 				jsx: 'automatic',
 				jsxImportSource: 'react',
-				loader: { '.js': 'jsx' },
 				plugins,
 			} )
 		);