Fix client boundary inheritance for barrel optimization (#64467)

### What Inherit the client boudaries from the found matched target in load barrel ### Why The root cause with the barrel transform, we missed the client boundary directive during the transform. Since the new version of mui's case looks like this: Import path page.js (server module) -> `<module>/index.js` (shared module) -> `<module/subpath>/index.js` (client module) -> `<module/subpath/sub-module.js> (client module) After our transform, we lost the `"use client"` which causes the mismatch of the transform: In `rsc` layer: the file pointing to the sub module entry (`<module/subpath>/index.js`), but without the client boundary. Fixes #64369 Closes NEXT-3101
vercel · Apr 17, 2024 · 78c2533 · 78c2533
1 parent 97a5586
commit 78c2533
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 1 deletion.
diff --git a/packages/next/src/build/webpack/loaders/next-barrel-loader.ts b/packages/next/src/build/webpack/loaders/next-barrel-loader.ts
@@ -221,9 +221,12 @@ async function getBarrelMapping(
             true,
             isClientEntry
           )
+
           if (targetMatches) {
             // Merge the export list
             exportList = exportList.concat(targetMatches.exportList)
+            // Inherit the client boundary from the target matched file
+            isClientEntry = isClientEntry || targetMatches.isClientEntry
           }
         })
       )

diff --git a/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts b/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts
@@ -14,7 +14,7 @@ import { hasRedbox } from 'next-test-utils'
         files: join(__dirname, 'fixture'),
 
         dependencies: {
-          '@mui/material': '5.15.4',
+          '@mui/material': '5.15.15',
           '@emotion/react': '11.11.1',
           '@emotion/styled': '11.11.0',
         },

diff --git a/test/production/app-dir/barrel-optimization/basic/app/layout.js b/test/production/app-dir/barrel-optimization/basic/app/layout.js
@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/app-dir/barrel-optimization/basic/app/page.js b/test/production/app-dir/barrel-optimization/basic/app/page.js
@@ -0,0 +1,9 @@
+import { ClientDefault } from 'my-lib'
+
+export default function Home() {
+  return (
+    <div id="client-mod">
+      <ClientDefault />
+    </div>
+  )
+}
diff --git a/test/production/app-dir/barrel-optimization/basic/index.test.ts b/test/production/app-dir/barrel-optimization/basic/index.test.ts
@@ -0,0 +1,17 @@
+import { createNextDescribe } from 'e2e-utils'
+
+describe('Skipped in Turbopack', () => {
+  createNextDescribe(
+    'app-dir - optimizePackageImports - basic',
+    {
+      files: __dirname,
+    },
+    ({ next }) => {
+      it('should build successfully', async () => {
+        // Ensure that MUI is working
+        const $ = await next.render$('/')
+        expect(await $('#client-mod').text()).toContain('client:default')
+      })
+    }
+  )
+})
diff --git a/test/production/app-dir/barrel-optimization/basic/next.config.js b/test/production/app-dir/barrel-optimization/basic/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['my-lib'],
+  },
+}
diff --git a/.../production/app-dir/barrel-optimization/basic/node_modules/my-lib/client/client-module.js b/.../production/app-dir/barrel-optimization/basic/node_modules/my-lib/client/client-module.js
diff --git a/test/production/app-dir/barrel-optimization/basic/node_modules/my-lib/client/index.js b/test/production/app-dir/barrel-optimization/basic/node_modules/my-lib/client/index.js
diff --git a/test/production/app-dir/barrel-optimization/basic/node_modules/my-lib/index.js b/test/production/app-dir/barrel-optimization/basic/node_modules/my-lib/index.js
diff --git a/test/production/app-dir/barrel-optimization/basic/node_modules/my-lib/package.json b/test/production/app-dir/barrel-optimization/basic/node_modules/my-lib/package.json
diff --git a/test/production/app-dir/barrel-optimization/mui/app/layout.js b/test/production/app-dir/barrel-optimization/mui/app/layout.js
@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/app-dir/barrel-optimization/mui/app/page.js b/test/production/app-dir/barrel-optimization/mui/app/page.js
@@ -0,0 +1,11 @@
+import { Typography } from '@mui/material'
+
+export default function Home() {
+  return (
+    <div id="typography">
+      <Typography id="typography" variant="h1">
+        typography
+      </Typography>
+    </div>
+  )
+}
diff --git a/test/production/app-dir/barrel-optimization/mui/index.test.ts b/test/production/app-dir/barrel-optimization/mui/index.test.ts
@@ -0,0 +1,23 @@
+import { createNextDescribe } from 'e2e-utils'
+
+describe('Skipped in Turbopack', () => {
+  createNextDescribe(
+    'app-dir - optimizePackageImports - mui',
+    {
+      files: __dirname,
+
+      dependencies: {
+        '@mui/material': '5.15.15',
+        '@emotion/react': '11.11.1',
+        '@emotion/styled': '11.11.0',
+      },
+    },
+    ({ next }) => {
+      it('should build successfully', async () => {
+        // Ensure that MUI is working
+        const $ = await next.render$('/')
+        expect(await $('#typography').text()).toContain('typography')
+      })
+    }
+  )
+})