fix(plugin-rsc): add CJS/ESM interop helper for require() transformation

- Add __cjs_interop__ runtime helper to handle ESM modules correctly
- Check for __esModule flag and default export before accessing .default
- Update all tests to reflect new transformation output
- Fixes issue where require("esm-package") would fail when transformed

Co-authored-by: hi-ogawa <4232207+hi-ogawa@users.noreply.github.com>

Author: Copilot

packages/plugin-rsc/src/transforms/cjs.test.ts

@@ -38,10 +38,11 @@ if (true) {
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
       "let exports = {}; const module = { exports };
+      function __cjs_interop__(m) { return m && m.__esModule ? m.default : (m.default !== undefined ? m.default : m); }
       if (true) {
-        module.exports = ((await import('./cjs/use-sync-external-store.production.js')).default);
+        module.exports = (__cjs_interop__(await import('./cjs/use-sync-external-store.production.js')));
       } else {
-        module.exports = ((await import('./cjs/use-sync-external-store.development.js')).default);
+        module.exports = (__cjs_interop__(await import('./cjs/use-sync-external-store.development.js')));
       }
       "
     `)
@@ -57,8 +58,9 @@ if (true) {
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
       "let exports = {}; const module = { exports };
-      const __cjs_to_esm_hoist_0 = (await import("react")).default;
-      const __cjs_to_esm_hoist_1 = (await import("react-dom")).default;
+      function __cjs_interop__(m) { return m && m.__esModule ? m.default : (m.default !== undefined ? m.default : m); }
+      const __cjs_to_esm_hoist_0 = __cjs_interop__(await import("react"));
+      const __cjs_to_esm_hoist_1 = __cjs_interop__(await import("react-dom"));
       "production" !== process.env.NODE_ENV && (function() { 
         var React = __cjs_to_esm_hoist_0;
         var ReactDOM = __cjs_to_esm_hoist_1;
@@ -82,12 +84,13 @@ function test() {
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
       "let exports = {}; const module = { exports };
-      const __cjs_to_esm_hoist_0 = (await import("te" + "st")).default;
-      const __cjs_to_esm_hoist_1 = (await import("test")).default;
-      const __cjs_to_esm_hoist_2 = (await import("test")).default;
-      const x1 = ((await import("te" + "st")).default);
-      const x2 = ((await import("test")).default)().test;
-      console.log(((await import("test")).default))
+      function __cjs_interop__(m) { return m && m.__esModule ? m.default : (m.default !== undefined ? m.default : m); }
+      const __cjs_to_esm_hoist_0 = __cjs_interop__(await import("te" + "st"));
+      const __cjs_to_esm_hoist_1 = __cjs_interop__(await import("test"));
+      const __cjs_to_esm_hoist_2 = __cjs_interop__(await import("test"));
+      const x1 = (__cjs_interop__(await import("te" + "st")));
+      const x2 = (__cjs_interop__(await import("test")))().test;
+      console.log((__cjs_interop__(await import("test"))))
 
       function test() {
         const y1 = __cjs_to_esm_hoist_0;

packages/plugin-rsc/src/transforms/cjs.ts

@@ -3,6 +3,13 @@ import MagicString from 'magic-string'
 import { analyze } from 'periscopic'
 import { walk } from 'estree-walker'
 
+// Runtime helper to handle CJS/ESM interop when transforming require() to import()
+// This is needed because when CJS code does require("pkg"), it expects:
+// - For CJS modules: the module.exports value directly
+// - For ESM modules: Node.js actually returns the namespace object
+// Since we're transforming to dynamic import(), we need to handle both cases
+const CJS_INTEROP_HELPER = `function __cjs_interop__(m) { return m && m.__esModule ? m.default : (m.default !== undefined ? m.default : m); }`
+
 export function transformCjsToEsm(
   code: string,
   ast: Program,
@@ -13,6 +20,8 @@ export function transformCjsToEsm(
   const parentNodes: Node[] = []
   const hoistedCodes: string[] = []
   let hoistIndex = 0
+  let needsInteropHelper = false
+
   walk(ast, {
     enter(node) {
       parentNodes.push(node)
@@ -38,11 +47,17 @@ export function transformCjsToEsm(
           }
         }
 
+        needsInteropHelper = true
+
         if (isTopLevel) {
-          // top-level scope `require` to dynamic import
+          // top-level scope `require` to dynamic import with interop
           // (this allows handling react development/production re-export within top-level if branch)
-          output.update(node.start, node.callee.end, '((await import')
-          output.appendRight(node.end, ').default)')
+          output.update(
+            node.start,
+            node.callee.end,
+            '(__cjs_interop__(await import',
+          )
+          output.appendRight(node.end, '))')
         } else {
           // hoist non top-level `require` to top-level
           const hoisted = `__cjs_to_esm_hoist_${hoistIndex}`
@@ -51,7 +66,7 @@ export function transformCjsToEsm(
             node.arguments[0]!.end,
           )
           hoistedCodes.push(
-            `const ${hoisted} = (await import(${importee})).default;\n`,
+            `const ${hoisted} = __cjs_interop__(await import(${importee}));\n`,
           )
           output.update(node.start, node.end, hoisted)
           hoistIndex++
@@ -65,6 +80,10 @@ export function transformCjsToEsm(
   for (const hoisted of hoistedCodes.reverse()) {
     output.prepend(hoisted)
   }
+  // Prepend interop helper if needed
+  if (needsInteropHelper) {
+    output.prepend(`${CJS_INTEROP_HELPER}\n`)
+  }
   // https://nodejs.org/docs/v22.19.0/api/modules.html#exports-shortcut
   output.prepend(`let exports = {}; const module = { exports };\n`)
   return { output }