Fix client reference keys of barrel-optimized files

packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

@@ -1,5 +1,8 @@
 import { RSC_MOD_REF_PROXY_ALIAS } from '../../../../lib/constants'
-import { RSC_MODULE_TYPES } from '../../../../shared/lib/constants'
+import {
+  BARREL_OPTIMIZATION_PREFIX,
+  RSC_MODULE_TYPES,
+} from '../../../../shared/lib/constants'
 import { warnOnce } from '../../../../shared/lib/utils/warn-once'
 import { getRSCModuleInformation } from '../../../analysis/get-page-static-info'
 import { getModuleBuildInfo } from '../get-module-build-info'
@@ -24,6 +27,23 @@ export default function transformSource(
   const buildInfo = getModuleBuildInfo(this._module)
   buildInfo.rsc = getRSCModuleInformation(source, true)
 
+  // Resource key is the unique identifier for the resource. When RSC renders
+  // a client module, that key is used to identify that module across all compiler
+  // layers.
+  //
+  // Usually it's the module's file path + the export name (e.g. `foo.js#bar`).
+  // But with Barrel Optimizations, one file can be splitted into multiple modules,
+  // so when you import `foo.js#bar` and `foo.js#baz`, they are actually different
+  // "foo.js" being created by the Barrel Loader (one only exports `bar`, the other
+  // only exports `baz`).
+  //
+  // Because of that, we must add another query param to the resource key to
+  // differentiate them.
+  let resourceKey: string = this.resourcePath
+  if (this._module?.matchResource?.startsWith(BARREL_OPTIMIZATION_PREFIX)) {
+    resourceKey += '@' + this._module.matchResource
+  }
+
   // A client boundary.
   if (buildInfo.rsc?.type === RSC_MODULE_TYPES.client) {
     const sourceType = this._module?.parser?.sourceType
@@ -61,7 +81,7 @@ export default function transformSource(
 
       let esmSource = `\
 import { createProxy } from "${MODULE_PROXY_PATH}"
-const proxy = createProxy(String.raw\`${this.resourcePath}\`)
+const proxy = createProxy(String.raw\`${resourceKey}\`)
 
 // Accessing the __esModule property and exporting $$typeof are required here.
 // The __esModule getter forces the proxy target to create the default export
@@ -73,14 +93,14 @@ const __default__ = proxy.default;
       let cnt = 0
       for (const ref of clientRefs) {
         if (ref === '') {
-          esmSource += `\nexports[''] = createProxy(String.raw\`${this.resourcePath}#\`);`
+          esmSource += `\nexports[''] = createProxy(String.raw\`${resourceKey}#\`);`
         } else if (ref === 'default') {
           esmSource += `
 export { __esModule, $$typeof };
 export default __default__;`
         } else {
           esmSource += `
-const e${cnt} = createProxy(String.raw\`${this.resourcePath}#${ref}\`);
+const e${cnt} = createProxy(String.raw\`${resourceKey}#${ref}\`);
 export { e${cnt++} as ${ref} };`
         }
       }

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -196,7 +196,7 @@ export class FlightClientEntryPlugin {
         // so it's only necessary to add it for matchResource or mod.resourceResolveData
         const modResource = modPath
           ? modPath.startsWith(BARREL_OPTIMIZATION_PREFIX)
-            ? mod.resource
+            ? mod.resource + '@' + modPath
             : modPath + modQuery
           : mod.resource
 

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -8,6 +8,7 @@
 import path from 'path'
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 import {
+  BARREL_OPTIMIZATION_PREFIX,
   CLIENT_REFERENCE_MANIFEST,
   SYSTEM_ENTRYPOINTS,
 } from '../../../shared/lib/constants'
@@ -277,7 +278,7 @@ export class ClientReferenceManifestPlugin {
           return
         }
 
-        const resource =
+        let resource =
           mod.type === 'css/mini-extract'
             ? // @ts-expect-error TODO: use `identifier()` instead.
               mod._identifier.slice(mod._identifier.lastIndexOf('!') + 1)
@@ -313,6 +314,15 @@ export class ClientReferenceManifestPlugin {
             )
           : null
 
+        // An extra query param is added to the resource key when it's optimized
+        // through the Barrel Loader. That's because the same file might be created
+        // as multiple modules (depending on what you import from it).
+        // See also: webpack/loaders/next-flight-loader/index.ts.
+        if (mod.matchResource?.startsWith(BARREL_OPTIMIZATION_PREFIX)) {
+          ssrNamedModuleId += '@' + mod.matchResource
+          resource += '@' + mod.matchResource
+        }
+
         function addClientReference() {
           const exportName = resource
           manifest.clientModules[exportName] = {