fix: avoid chunk conflication when muliple libs present

Author: fi3ework

packages/core/src/config.ts

@@ -973,10 +973,11 @@ const composeExternalsConfig = (
   };
 };
 
-const composeAutoExtensionConfig = (
+const composeOutputFilenameConfig = (
   config: LibConfig,
   format: Format,
   autoExtension: boolean,
+  multiCompilerIndex: number | null,
   pkgJson?: PkgJson,
 ): {
   config: EnvironmentConfig;
@@ -998,9 +999,38 @@ const composeAutoExtensionConfig = (
     return filenameHash ? '.[contenthash:8]' : '';
   };
 
+  // Copied from https://github.com/web-infra-dev/rspack/blob/2efea8673f86a562559e26a9351680e8df4d9ae9/packages/rspack/src/config/defaults.ts#L667-L680.
+  const inferChunkFilename = (filename: string): string | undefined => {
+    if (typeof filename !== 'function') {
+      const hasName = filename.includes('[name]');
+      const hasId = filename.includes('[id]');
+      const hasChunkHash = filename.includes('[chunkhash]');
+      const hasContentHash = filename.includes('[contenthash]');
+      const multiCompilerPrefix =
+        typeof multiCompilerIndex === 'number' ? `${multiCompilerIndex}~` : '';
+      // Anything changing depending on chunk is fine
+
+      if (hasChunkHash || hasContentHash || hasName || hasId)
+        return filename.replace(
+          /(^|\/)([^/]*(?:\?|$))/,
+          `$1${multiCompilerPrefix}$2`,
+        );
+      // Otherwise prefix "[id]." in front of the basename to make it changing
+      return filename.replace(
+        /(^|\/)([^/]*(?:\?|$))/,
+        `$1${multiCompilerIndex}[id].$2`,
+      );
+    }
+
+    return undefined;
+  };
+
   const hash = getHash();
   const defaultJsFilename = `[name]${hash}${jsExtension}`;
   const userJsFilename = config.output?.filename?.js;
+  const defaultJsChunkFilename = inferChunkFilename(
+    (userJsFilename as string) ?? defaultJsFilename,
+  );
 
   // will be returned to use in redirect feature
   // only support string type for now since we can not get the return value of function
@@ -1009,15 +1039,25 @@ const composeAutoExtensionConfig = (
       ? extname(userJsFilename)
       : jsExtension;
 
-  const finalConfig = userJsFilename
-    ? {}
-    : {
+  const chunkFilename: RsbuildConfig = {
+    tools: {
+      rspack: {
+        output: {
+          chunkFilename: defaultJsChunkFilename,
+        },
+      },
+    },
+  };
+
+  const finalConfig: RsbuildConfig = userJsFilename
+    ? chunkFilename
+    : mergeRsbuildConfig(chunkFilename, {
         output: {
           filename: {
             js: defaultJsFilename,
           },
         },
-      };
+      });
 
   return {
     config: finalConfig,
@@ -1604,6 +1644,7 @@ const composeExternalHelpersConfig = (
 
 async function composeLibRsbuildConfig(
   config: LibConfig,
+  multiCompilerIndex: number | null, // null means there's non multi-compiler
   root?: string,
   sharedPlugins?: RsbuildPlugins,
 ) {
@@ -1649,17 +1690,28 @@ async function composeLibRsbuildConfig(
     config.output?.externals,
   );
   const {
-    config: autoExtensionConfig,
+    config: outputFilenameConfig,
     jsExtension,
     dtsExtension,
-  } = composeAutoExtensionConfig(config, format, autoExtension, pkgJson);
+  } = composeOutputFilenameConfig(
+    config,
+    format,
+    autoExtension,
+    multiCompilerIndex,
+    pkgJson,
+  );
   const { entryConfig, outBase } = await composeEntryConfig(
     config.source?.entry!,
     config.bundle,
     rootPath,
     cssModulesAuto,
     config.outBase,
   );
+  // const outputConfig = composeOutputConfig(
+  //   multiCompilerIndex,
+  //   format,
+  //   jsExtension,
+  // );
   const { config: bundlelessExternalConfig } = composeBundlelessExternalConfig(
     jsExtension,
     redirect,
@@ -1709,10 +1761,11 @@ async function composeLibRsbuildConfig(
 
   return mergeRsbuildConfig(
     formatConfig,
+    // outputConfig,
     shimsConfig,
     syntaxConfig,
     externalHelpersConfig,
-    autoExtensionConfig,
+    outputFilenameConfig,
     targetConfig,
     // #region Externals configs
     // The order of the externals config should come in the following order:
@@ -1761,7 +1814,7 @@ export async function composeCreateRsbuildConfig(
     );
   }
 
-  const libConfigPromises = libConfigsArray.map(async (libConfig) => {
+  const libConfigPromises = libConfigsArray.map(async (libConfig, index) => {
     const userConfig = mergeRsbuildConfig<LibConfig>(
       sharedRsbuildConfig,
       libConfig,
@@ -1771,6 +1824,7 @@ export async function composeCreateRsbuildConfig(
     // configuration and Lib configuration in the settings.
     const libRsbuildConfig = await composeLibRsbuildConfig(
       userConfig,
+      libConfigsArray.length > 1 ? index : null,
       root,
       sharedPlugins,
     );

packages/core/tests/__snapshots__/config.test.ts.snap

@@ -393,7 +393,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
   output: {
     path: '<WORKSPACE>/dist',
     filename: '[name].js',
-    chunkFilename: '[name].js',
+    chunkFilename: '0~[name].js',
     publicPath: 'auto',
     pathinfo: false,
     hashFunction: 'xxhash64',
@@ -1091,7 +1091,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
   output: {
     path: '<WORKSPACE>/dist',
     filename: '[name].cjs',
-    chunkFilename: '[name].cjs',
+    chunkFilename: '1~[name].cjs',
     publicPath: 'auto',
     pathinfo: false,
     hashFunction: 'xxhash64',
@@ -1775,7 +1775,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
   output: {
     path: '<WORKSPACE>/dist',
     filename: '[name].js',
-    chunkFilename: '[name].js',
+    chunkFilename: '2~[name].js',
     publicPath: '/',
     pathinfo: false,
     hashFunction: 'xxhash64',
@@ -2375,7 +2375,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
   output: {
     path: '<WORKSPACE>/dist',
     filename: '[name].js',
-    chunkFilename: '[name].js',
+    chunkFilename: '3~[name].js',
     publicPath: '/',
     pathinfo: false,
     hashFunction: 'xxhash64',
@@ -3674,6 +3674,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
               },
             },
             "output": {
+              "chunkFilename": "0~[name].js",
               "chunkFormat": "module",
               "chunkLoading": "import",
               "library": {
@@ -3945,6 +3946,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
               },
             },
             "output": {
+              "chunkFilename": "1~[name].cjs",
               "chunkFormat": "commonjs",
               "chunkLoading": "require",
               "iife": false,
@@ -4182,6 +4184,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
             },
             "output": {
               "asyncChunks": false,
+              "chunkFilename": "2~[name].js",
               "library": {
                 "type": "umd",
               },
@@ -4413,6 +4416,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
             },
             "output": {
               "asyncChunks": false,
+              "chunkFilename": "3~[name].js",
               "iife": true,
               "library": {
                 "type": "modern-module",

pnpm-lock.yaml

@@ -0,0 +1,6 @@
+{
+  "name": "minify-output-chunk-file-name-multi-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/output/chunkFileName-multi/package.json

@@ -0,0 +1,21 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({
+      source: {
+        entry: {
+          lib1: './src/lib1.js',
+        },
+      },
+    }),
+    generateBundleEsmConfig({
+      source: {
+        entry: {
+          lib2: './src/lib2.js',
+        },
+      },
+    }),
+  ],
+});

tests/integration/output/chunkFileName-multi/rslib1.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  output: {
+    filename: {
+      js: 'static/js/[name].[contenthash:8].js',
+    },
+  },
+  lib: [
+    generateBundleEsmConfig({
+      source: {
+        entry: {
+          lib1: './src/lib1.js',
+        },
+      },
+    }),
+    generateBundleEsmConfig({
+      source: {
+        entry: {
+          lib2: './src/lib2.js',
+        },
+      },
+    }),
+  ],
+});

tests/integration/output/chunkFileName-multi/rslib2.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({
+      source: {
+        entry: {
+          lib1: './src/lib1.js',
+        },
+      },
+      output: {
+        filename: {
+          js: 'static1/js/[name].js',
+        },
+      },
+    }),
+    generateBundleEsmConfig({
+      source: {
+        entry: {
+          lib2: './src/lib2.js',
+        },
+      },
+      output: {
+        filename: {
+          js: 'static2/js/[name].[contenthash:8].js',
+        },
+      },
+    }),
+  ],
+});

tests/integration/output/chunkFileName-multi/rslib3.config.ts

@@ -0,0 +1,4 @@
+export default async function main() {
+  const { foo } = await import('./shared.js');
+  return foo;
+}

tests/integration/output/chunkFileName-multi/src/lib1.js

@@ -0,0 +1,4 @@
+export default async function main() {
+  const { bar } = await import('./shared.js');
+  return bar;
+}

tests/integration/output/chunkFileName-multi/src/lib2.js

@@ -0,0 +1,2 @@
+export const foo = 'foo';
+export const bar = 'bar';