fix: use ESM chunkLoading for "esm" format (#256)

Author: fi3ework

packages/core/src/config.ts

@@ -445,13 +445,6 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
       return {
         tools: {
           rspack: {
-            output: {
-              module: true,
-              chunkFormat: 'module',
-              library: {
-                type: 'modern-module',
-              },
-            },
             module: {
               parser: {
                 javascript: jsParserOptions,
@@ -461,6 +454,16 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
               concatenateModules: true,
               sideEffects: 'flag',
             },
+            output: {
+              module: true,
+              chunkFormat: 'module',
+              library: {
+                type: 'modern-module',
+              },
+              chunkLoading: 'import',
+              workerChunkLoading: 'import',
+              wasmLoading: 'fetch',
+            },
             experiments: {
               outputModule: true,
             },
@@ -483,6 +486,9 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
               library: {
                 type: 'commonjs',
               },
+              chunkLoading: 'require',
+              workerChunkLoading: 'async-node',
+              wasmLoading: 'async-node',
             },
           },
         },
@@ -758,11 +764,6 @@ const composeTargetConfig = (
         tools: {
           rspack: {
             target: ['web'],
-            output: {
-              chunkLoading: 'import',
-              workerChunkLoading: 'import',
-              wasmLoading: 'fetch',
-            },
           },
         },
       };
@@ -772,13 +773,8 @@ const composeTargetConfig = (
           rspack: {
             target: ['node'],
             // "__dirname" and "__filename" shims will automatically be enabled when `output.module` is `true`,
-            // and leave them as-is in the rest of the cases.
+            // and leave them as-is in the rest of the cases. Leave the comments here to explain the behavior.
             // { node: { __dirname: ..., __filename: ... } }
-            output: {
-              chunkLoading: 'require',
-              workerChunkLoading: 'async-node',
-              wasmLoading: 'async-node',
-            },
           },
         },
         output: {

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

@@ -116,19 +116,17 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
             },
             "output": {
               "chunkFormat": "module",
+              "chunkLoading": "import",
               "library": {
                 "type": "modern-module",
               },
               "module": true,
+              "wasmLoading": "fetch",
+              "workerChunkLoading": "import",
             },
           },
           [Function],
           {
-            "output": {
-              "chunkLoading": "import",
-              "wasmLoading": "fetch",
-              "workerChunkLoading": "import",
-            },
             "target": [
               "web",
             ],
@@ -267,19 +265,17 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
             },
             "output": {
               "chunkFormat": "commonjs",
+              "chunkLoading": "require",
               "iife": false,
               "library": {
                 "type": "commonjs",
               },
+              "wasmLoading": "async-node",
+              "workerChunkLoading": "async-node",
             },
           },
           [Function],
           {
-            "output": {
-              "chunkLoading": "import",
-              "wasmLoading": "fetch",
-              "workerChunkLoading": "import",
-            },
             "target": [
               "web",
             ],
@@ -410,11 +406,6 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
           },
           [Function],
           {
-            "output": {
-              "chunkLoading": "import",
-              "wasmLoading": "fetch",
-              "workerChunkLoading": "import",
-            },
             "target": [
               "web",
             ],

pnpm-lock.yaml

@@ -0,0 +1,6 @@
+{
+  "name": "async-chunks-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/async-chunks/default/package.json

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

tests/integration/async-chunks/default/rslib.config.ts

@@ -0,0 +1 @@
+export const dyn = 'dynamic';

tests/integration/async-chunks/default/src/dynamic.js

@@ -0,0 +1,6 @@
+const foo = async () => {
+  const { dyn } = await import('./dynamic.js');
+  return dyn;
+};
+
+export { foo };

tests/integration/async-chunks/default/src/index.js

@@ -0,0 +1,13 @@
+import { join } from 'node:path';
+import { buildAndGetResults } from 'test-helper';
+import { expect, test } from 'vitest';
+
+test('should get correct value from async chunks', async () => {
+  const fixturePath = join(__dirname, 'default');
+  const { entryFiles } = await buildAndGetResults(fixturePath);
+
+  for (const format of ['esm', 'cjs']) {
+    const { foo } = await import(entryFiles[format]);
+    expect(await foo()).toBe('dynamic');
+  }
+});