Correctly read rawRequest for frontend ESM (#31917)

Fixes: #31909
Fixes: #32050

Author: vcanales

bin/build-plugin-zip.sh

@@ -114,6 +114,7 @@ build_files=$(
 	build/block-library/blocks/*.php \
 	build/block-library/blocks/*/block.json \
 	build/block-library/blocks/*/*.css \
+	build/block-library/blocks/*/*.js \
 	build/edit-widgets/blocks/*/block.json \
 )
 

webpack.config.js

@@ -135,16 +135,19 @@ module.exports = {
 	entry: createEntrypoints(),
 	output: {
 		devtoolNamespace: 'wp',
-		filename: ( data ) => {
-			const { chunk } = data;
+		filename: ( pathData ) => {
+			const { chunk } = pathData;
 			const { entryModule } = chunk;
-			const { rawRequest } = entryModule;
+			const { rawRequest, rootModule } = entryModule;
 
-			/*
-			 * If the file being built is a Core Block's frontend file,
-			 * we build it in the block's directory.
-			 */
-			if ( rawRequest && rawRequest.includes( '/frontend.js' ) ) {
+			// When processing ESM files, the requested path
+			// is defined in `entryModule.rootModule.rawRequest`, instead of
+			// being present in `entryModule.rawRequest`.
+			// In the context of frontend files, they would be processed
+			// as ESM if they use `import` or `export` within it.
+			const request = rootModule?.rawRequest || rawRequest;
+
+			if ( request.includes( '/frontend.js' ) ) {
 				return `./build/block-library/blocks/[name]/frontend.js`;
 			}