fix: Node shims for 'javascript/esm' files (#1274)

Author: Timeless0911

packages/core/src/config.ts

@@ -596,11 +596,13 @@ const composeFormatConfig = ({
   bundle = true,
   umdName,
   pkgJson,
+  enabledShims,
 }: {
   format: Format;
   pkgJson: PkgJson;
   bundle?: boolean;
   umdName?: Rspack.LibraryName;
+  enabledShims: DeepRequired<Shims>;
 }): EnvironmentConfig => {
   const jsParserOptions: Record<string, Rspack.JavascriptParserOptions> = {
     cjs: {
@@ -625,6 +627,7 @@ const composeFormatConfig = ({
   const plugins = [
     new rspack.experiments.RslibPlugin({
       interceptApiPlugin: true,
+      forceNodeShims: enabledShims.esm.__dirname || enabledShims.esm.__filename,
     }),
   ];
 
@@ -1730,6 +1733,7 @@ async function composeLibRsbuildConfig(
     pkgJson: pkgJson!,
     bundle,
     umdName,
+    enabledShims,
   });
   const externalHelpersConfig = composeExternalHelpersConfig(
     externalHelpers,

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

@@ -975,7 +975,8 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
       name: 'RslibPlugin',
       _args: [
         {
-          interceptApiPlugin: true
+          interceptApiPlugin: true,
+          forceNodeShims: false
         }
       ]
     },
@@ -1673,7 +1674,8 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
       name: 'RslibPlugin',
       _args: [
         {
-          interceptApiPlugin: true
+          interceptApiPlugin: true,
+          forceNodeShims: false
         }
       ]
     },
@@ -2276,7 +2278,8 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
       name: 'RslibPlugin',
       _args: [
         {
-          interceptApiPlugin: true
+          interceptApiPlugin: true,
+          forceNodeShims: false
         }
       ]
     },
@@ -2878,7 +2881,8 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
       name: 'RslibPlugin',
       _args: [
         {
-          interceptApiPlugin: true
+          interceptApiPlugin: true,
+          forceNodeShims: false
         }
       ]
     },
@@ -3708,6 +3712,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
               RslibPlugin {
                 "_args": [
                   {
+                    "forceNodeShims": false,
                     "interceptApiPlugin": true,
                   },
                 ],
@@ -3990,6 +3995,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
               RslibPlugin {
                 "_args": [
                   {
+                    "forceNodeShims": false,
                     "interceptApiPlugin": true,
                   },
                 ],
@@ -4233,6 +4239,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
               RslibPlugin {
                 "_args": [
                   {
+                    "forceNodeShims": false,
                     "interceptApiPlugin": true,
                   },
                 ],
@@ -4475,6 +4482,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
               RslibPlugin {
                 "_args": [
                   {
+                    "forceNodeShims": false,
                     "interceptApiPlugin": true,
                   },
                 ],

tests/integration/shims/esm/rslib.config.ts

@@ -4,7 +4,12 @@ import { generateBundleEsmConfig } from 'test-helper';
 export default defineConfig({
   lib: [
     generateBundleEsmConfig({
-      shims: { esm: { __dirname: true, __filename: true } },
+      shims: {
+        esm: {
+          __dirname: true,
+          __filename: true,
+        },
+      },
       source: {
         entry: {
           index: './src/index.ts',
@@ -15,7 +20,12 @@ export default defineConfig({
       },
     }),
     generateBundleEsmConfig({
-      shims: { esm: { __dirname: true, __filename: true } },
+      shims: {
+        esm: {
+          __dirname: true,
+          __filename: true,
+        },
+      },
       syntax: 'esnext',
       source: {
         entry: {
@@ -27,17 +37,41 @@ export default defineConfig({
       },
     }),
     generateBundleEsmConfig({
-      shims: { esm: { __dirname: true, __filename: true, require: true } },
+      shims: {
+        esm: {
+          require: true,
+        },
+      },
       syntax: 'esnext',
       source: {
         entry: {
           index: './src/require.ts',
         },
       },
       output: {
-        copy: [{ from: './src/ok.cjs' }],
+        copy: [
+          {
+            from: './src/ok.cjs',
+          },
+        ],
         distPath: './dist/enabled/esm2',
       },
     }),
+    generateBundleEsmConfig({
+      shims: {
+        esm: {
+          __dirname: true,
+          __filename: true,
+        },
+      },
+      source: {
+        entry: {
+          index: './src/node.mjs',
+        },
+      },
+      output: {
+        distPath: './dist/enabled/esm3',
+      },
+    }),
   ],
 });

tests/integration/shims/esm/rslibShimsDisabled.config.ts

@@ -3,7 +3,7 @@ import config from './rslib.config';
 
 export default defineConfig({
   ...config,
-  lib: [config.lib[0]!, config.lib[2]!].map((libConfig) => {
+  lib: config.lib.map((libConfig) => {
     if (typeof libConfig.output!.distPath === 'string') {
       libConfig.output!.distPath = libConfig.output!.distPath.replace(
         './dist/enabled',

tests/integration/shims/esm/src/node.mjs

@@ -0,0 +1,9 @@
+const d1 = __dirname;
+const f1 = __filename;
+
+export default () => {
+  const d2 = __dirname;
+  const f2 = __filename;
+
+  return { d1, d2, f1, f2 };
+};

tests/integration/shims/index.test.ts

@@ -57,6 +57,24 @@ describe('ESM shims', async () => {
       "
     `);
   });
+
+  test('Node.js shims in mjs file', async () => {
+    for (const shim of [
+      'import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";',
+      'import { dirname as __webpack_dirname__ } from "node:path";',
+      'var node_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));',
+      'var node_filename = __webpack_fileURLToPath__(import.meta.url);',
+    ]) {
+      expect(entries.esm3).toContain(shim);
+    }
+
+    const entry3Result = (await import(entryFiles.esm3!)).default();
+
+    expect(entry3Result.d1).toBe(path.dirname(entryFiles.esm3!));
+    expect(entry3Result.d1).toBe(entry3Result.d2);
+    expect(entry3Result.f1).toBe(entryFiles.esm3);
+    expect(entry3Result.f1).toBe(entry3Result.f2);
+  });
 });
 
 describe('ESM shims disabled', async () => {
@@ -68,9 +86,10 @@ describe('ESM shims disabled', async () => {
     });
 
     expect(entries.esm0).not.toContain('fileURLToPath');
+    expect(entries.esm1).not.toContain('fileURLToPath');
 
     const context = vm.createContext({});
-    const module = new vm.SourceTextModule(entries.esm1!, {
+    const module = new vm.SourceTextModule(entries.esm2!, {
       context,
     });
 
@@ -80,6 +99,8 @@ describe('ESM shims disabled', async () => {
 
     await module.link(linker);
     await expect(module.evaluate()).rejects.toThrow('require is not defined');
+
+    expect(entries.esm3).not.toContain('fileURLToPath');
   });
 });