Compile unbundled packages as ESM

These must be ESM so that they can import() other ESM.

fixtures/flight/loader/index.js

@@ -23,8 +23,17 @@ async function babelLoad(url, context, defaultLoad) {
   const result = await defaultLoad(url, context, defaultLoad);
   if (result.format === 'module') {
     const opt = Object.assign({filename: url}, babelOptions);
-    const {code} = await babel.transformAsync(result.source, opt);
-    return {source: code, format: 'module'};
+    const newResult = await babel.transformAsync(result.source, opt);
+    if (!newResult) {
+      if (typeof result.source === 'string') {
+        return result;
+      }
+      return {
+        source: Buffer.from(result.source).toString('utf8'),
+        format: 'module',
+      };
+    }
+    return {source: newResult.code, format: 'module'};
   }
   return defaultLoad(url, context, defaultLoad);
 }
@@ -39,8 +48,16 @@ async function babelTransformSource(source, context, defaultTransformSource) {
   const {format} = context;
   if (format === 'module') {
     const opt = Object.assign({filename: context.url}, babelOptions);
-    const {code} = await babel.transformAsync(source, opt);
-    return {source: code};
+    const newResult = await babel.transformAsync(source, opt);
+    if (!newResult) {
+      if (typeof source === 'string') {
+        return {source};
+      }
+      return {
+        source: Buffer.from(source).toString('utf8'),
+      };
+    }
+    return {source: newResult.code};
   }
   return defaultTransformSource(source, context, defaultTransformSource);
 }

fixtures/flight/server/handler.js

@@ -1,11 +1,13 @@
 'use strict';
 
-const {renderToPipeableStream} = require('react-server-dom-webpack/server');
 const {readFile} = require('fs').promises;
 const {resolve} = require('path');
 const React = require('react');
 
 module.exports = async function (req, res) {
+  const {renderToPipeableStream} = await import(
+    'react-server-dom-webpack/server'
+  );
   switch (req.method) {
     case 'POST': {
       const serverReference = JSON.parse(req.get('rsc-action'));

packages/react-server-dom-webpack/client.node.unbundled.js → packages/react-server-dom-webpack/esm/react-server-dom-webpack-client.node.unbundled.development.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientNode';
+export * from '../src/ReactFlightDOMClientNode.js';

packages/react-server-dom-webpack/server.node.unbundled.js → packages/react-server-dom-webpack/esm/react-server-dom-webpack-client.node.unbundled.production.min.js

@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerNode';
+export * from '../src/ReactFlightDOMClientNode.js';

packages/react-server-dom-webpack/esm/react-server-dom-webpack-server.node.unbundled.development.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightDOMServerNode.js';

packages/react-server-dom-webpack/esm/react-server-dom-webpack-server.node.unbundled.production.min.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightDOMServerNode.js';

packages/react-server-dom-webpack/package.json

@@ -38,23 +38,28 @@
       "worker": "./client.edge.js",
       "node": {
         "webpack": "./client.node.js",
-        "default": "./client.node.unbundled.js"
+        "production": "./esm/react-server-dom-webpack-client.node.unbundled.production.min.js",
+        "default": "./esm/react-server-dom-webpack-client.node.unbundled.development.js"
       },
       "browser": "./client.browser.js",
       "default": "./client.browser.js"
     },
     "./client.browser": "./client.browser.js",
     "./client.edge": "./client.edge.js",
     "./client.node": "./client.node.js",
-    "./client.node.unbundled": "./client.node.unbundled.js",
+    "./client.node.unbundled": {
+      "production": "./esm/react-server-dom-webpack-client.node.unbundled.production.min.js",
+      "default": "./esm/react-server-dom-webpack-client.node.unbundled.development.js"
+    },
     "./server": {
       "react-server": {
         "workerd": "./server.edge.js",
         "edge-light": "./server.edge.js",
         "deno": "./server.browser.js",
         "node": {
           "webpack": "./server.node.js",
-          "default": "./server.node.unbundled.js"
+          "production": "./esm/react-server-dom-webpack-server.node.unbundled.production.min.js",
+          "default": "./esm/react-server-dom-webpack-server.node.unbundled.development.js"
         },
         "browser": "./server.browser.js"
       },
@@ -63,8 +68,11 @@
     "./server.browser": "./server.browser.js",
     "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
-    "./server.node.unbundled": "./server.node.unbundled.js",
-    "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
+    "./server.node.unbundled": {
+      "production": "./esm/react-server-dom-webpack-server.node.unbundled.production.min.js",
+      "default": "./esm/react-server-dom-webpack-server.node.unbundled.development.js"
+    },
+    "./node-loader": "./esm/react-server-dom-webpack-node-loader.production.min.js",
     "./node-register": "./node-register.js",
     "./src/*": "./src/*",
     "./package.json": "./package.json"

scripts/rollup/build.js

@@ -45,7 +45,8 @@ process.on('unhandledRejection', err => {
 
 const {
   NODE_ES2015,
-  NODE_ESM,
+  ESM_DEV,
+  ESM_PROD,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -216,7 +217,8 @@ function getFormat(bundleType) {
     case RN_FB_PROD:
     case RN_FB_PROFILING:
       return `cjs`;
-    case NODE_ESM:
+    case ESM_DEV:
+    case ESM_PROD:
       return `es`;
     case BROWSER_SCRIPT:
       return `iife`;
@@ -226,15 +228,16 @@ function getFormat(bundleType) {
 function isProductionBundleType(bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
-    case NODE_ESM:
       return true;
+    case ESM_DEV:
     case UMD_DEV:
     case NODE_DEV:
     case BUN_DEV:
     case FB_WWW_DEV:
     case RN_OSS_DEV:
     case RN_FB_DEV:
       return false;
+    case ESM_PROD:
     case UMD_PROD:
     case NODE_PROD:
     case BUN_PROD:
@@ -256,7 +259,6 @@ function isProductionBundleType(bundleType) {
 function isProfilingBundleType(bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
-    case NODE_ESM:
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case NODE_DEV:
@@ -267,6 +269,8 @@ function isProfilingBundleType(bundleType) {
     case RN_FB_PROD:
     case RN_OSS_DEV:
     case RN_OSS_PROD:
+    case ESM_DEV:
+    case ESM_PROD:
     case UMD_DEV:
     case UMD_PROD:
     case BROWSER_SCRIPT:
@@ -385,7 +389,7 @@ function getPlugins(
     // Apply dead code elimination and/or minification.
     // closure doesn't yet support leaving ESM imports intact
     isProduction &&
-      bundleType !== NODE_ESM &&
+      bundleType !== ESM_PROD &&
       closure({
         compilation_level: 'SIMPLE',
         language_in: 'ECMASCRIPT_2020',
@@ -396,7 +400,9 @@ function getPlugins(
             ? 'ECMASCRIPT5'
             : 'ECMASCRIPT5_STRICT',
         emit_use_strict:
-          bundleType !== BROWSER_SCRIPT && bundleType !== NODE_ESM,
+          bundleType !== BROWSER_SCRIPT &&
+          bundleType !== ESM_PROD &&
+          bundleType !== ESM_DEV,
         env: 'CUSTOM',
         warning_level: 'QUIET',
         apply_input_source_maps: false,
@@ -744,7 +750,8 @@ async function buildEverything() {
   for (const bundle of Bundles.bundles) {
     bundles.push(
       [bundle, NODE_ES2015],
-      [bundle, NODE_ESM],
+      [bundle, ESM_DEV],
+      [bundle, ESM_PROD],
       [bundle, UMD_DEV],
       [bundle, UMD_PROD],
       [bundle, UMD_PROFILING],

scripts/rollup/bundles.js

@@ -9,7 +9,8 @@ const __EXPERIMENTAL__ =
 
 const bundleTypes = {
   NODE_ES2015: 'NODE_ES2015',
-  NODE_ESM: 'NODE_ESM',
+  ESM_DEV: 'ESM_DEV',
+  ESM_PROD: 'ESM_PROD',
   UMD_DEV: 'UMD_DEV',
   UMD_PROD: 'UMD_PROD',
   UMD_PROFILING: 'UMD_PROFILING',
@@ -32,7 +33,8 @@ const bundleTypes = {
 
 const {
   NODE_ES2015,
-  NODE_ESM,
+  ESM_DEV,
+  ESM_PROD,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -358,7 +360,7 @@ const bundles = [
     externals: ['react', 'util', 'async_hooks', 'react-dom'],
   },
   {
-    bundleTypes: [NODE_DEV, NODE_PROD],
+    bundleTypes: [ESM_DEV, ESM_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/server.node.unbundled',
     global: 'ReactServerDOMServer',
@@ -396,7 +398,7 @@ const bundles = [
     externals: ['react', 'util'],
   },
   {
-    bundleTypes: [NODE_DEV, NODE_PROD],
+    bundleTypes: [ESM_DEV, ESM_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/client.node.unbundled',
     global: 'ReactServerDOMClient',
@@ -427,7 +429,7 @@ const bundles = [
 
   /******* React Server DOM Webpack Node.js Loader *******/
   {
-    bundleTypes: [NODE_ESM],
+    bundleTypes: [ESM_PROD],
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-loader',
     global: 'ReactServerWebpackNodeLoader',
@@ -1025,12 +1027,14 @@ function getFilename(bundle, bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
       return `${name}.js`;
-    case NODE_ESM:
-      return `${name}.js`;
     case BUN_DEV:
       return `${name}.development.js`;
     case BUN_PROD:
       return `${name}.production.min.js`;
+    case ESM_DEV:
+      return `${name}.development.js`;
+    case ESM_PROD:
+      return `${name}.production.min.js`;
     case UMD_DEV:
       return `${name}.development.js`;
     case UMD_PROD:

scripts/rollup/packaging.js

@@ -17,7 +17,8 @@ const {
 
 const {
   NODE_ES2015,
-  NODE_ESM,
+  ESM_DEV,
+  ESM_PROD,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -49,7 +50,8 @@ function getBundleOutputPath(bundle, bundleType, filename, packageName) {
   switch (bundleType) {
     case NODE_ES2015:
       return `build/node_modules/${packageName}/cjs/${filename}`;
-    case NODE_ESM:
+    case ESM_DEV:
+    case ESM_PROD:
       return `build/node_modules/${packageName}/esm/${filename}`;
     case BUN_DEV:
     case BUN_PROD:

scripts/rollup/wrappers.js

@@ -6,7 +6,8 @@ const {bundleTypes, moduleTypes} = require('./bundles');
 
 const {
   NODE_ES2015,
-  NODE_ESM,
+  ESM_DEV,
+  ESM_PROD,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -66,8 +67,20 @@ ${license}
 ${source}`;
   },
 
-  /***************** NODE_ESM *****************/
-  [NODE_ESM](source, globalName, filename, moduleType) {
+  /***************** ESM_DEV *****************/
+  [ESM_DEV](source, globalName, filename, moduleType) {
+    return `/**
+* @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** ESM_PROD *****************/
+  [ESM_PROD](source, globalName, filename, moduleType) {
     return `/**
 * @license React
  * ${filename}

scripts/shared/inlinedHostConfigs.js

@@ -33,6 +33,8 @@ module.exports = [
       'react-server-dom-webpack/client.node.unbundled',
       'react-server-dom-webpack/server',
       'react-server-dom-webpack/server.node.unbundled',
+      'react-server-dom-webpack/esm/react-server-dom-webpack-server.node.unbundled.production.min.js',
+      'react-server-dom-webpack/esm/react-server-dom-webpack-server.node.unbundled.development.js',
       'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/server.node
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
       'react-devtools',