Fix missing SWC transforms for optimized barrel files (#57474)

With Barrel Optimization, we are trying to "shortcut" the import to be
directly pointing to the final target, as barrel files shouldn't have
any side effects. However, there could be `"use client"` and `"use
server"` directives which we can't ignore. Hence we must apply the
`serverComponents` transform of SWC to these barrel files too.

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/next/src/build/webpack/loaders/next-barrel-loader.ts

@@ -88,6 +88,7 @@ import type webpack from 'webpack'
 
 import path from 'path'
 import { transform } from '../../swc'
+import { WEBPACK_LAYERS } from '../../../lib/constants'
 
 // This is a in-memory cache for the mapping of barrel exports. This only applies
 // to the packages that we optimize. It will never change (e.g. upgrading packages)
@@ -103,6 +104,7 @@ const barrelTransformMappingCache = new Map<
 >()
 
 async function getBarrelMapping(
+  layer: string | null | undefined,
   resourcePath: string,
   swcCacheDir: string,
   resolve: (context: string, request: string) => Promise<string>,
@@ -133,6 +135,9 @@ async function getBarrelMapping(
         optimizeBarrelExports: {
           wildcard: isWildcard,
         },
+        serverComponents: {
+          isReactServerLayer: layer === WEBPACK_LAYERS.reactServerComponents,
+        },
         jsc: {
           parser: {
             syntax: isTypeScript ? 'typescript' : 'ecmascript',
@@ -244,6 +249,7 @@ const NextBarrelLoader = async function (
   })
 
   const mapping = await getBarrelMapping(
+    this._module?.layer,
     this.resourcePath,
     swcCacheDir,
     resolve,

test/development/basic/barrel-optimization.test.ts

@@ -148,4 +148,9 @@ describe('optimizePackageImports', () => {
     const html = await next.render('/client')
     expect(html).toContain('this is a client component')
   })
+
+  it('should support "use client" directive in barrel file', async () => {
+    const html = await next.render('/client-boundary')
+    expect(html).toContain('<button>0</button>')
+  })
 })

test/development/basic/barrel-optimization/app/client-boundary/page.js

@@ -0,0 +1,5 @@
+import { Button } from 'my-client-lib'
+
+export default function Page() {
+  return <Button />
+}

test/development/basic/barrel-optimization/next.config.js

@@ -1,5 +1,6 @@
 module.exports = {
+  transpilePackages: ['my-client-lib'],
   experimental: {
-    optimizePackageImports: ['my-lib', 'recursive-barrel'],
+    optimizePackageImports: ['my-lib', 'recursive-barrel', 'my-client-lib'],
   },
 }

test/development/basic/barrel-optimization/node_modules_bak/my-client-lib/button.js

@@ -0,0 +1,6 @@
+import { useState } from 'react'
+
+export function Button() {
+  const [count, setCount] = useState(0)
+  return <button onClick={() => setCount(count + 1)}>{count}</button>
+}

test/development/basic/barrel-optimization/node_modules_bak/my-client-lib/index.js

@@ -0,0 +1,3 @@
+'use client'
+
+export { Button } from './button'