feat: support import.meta.url shim for CJS

Author: fi3ework

e2e/cases/shims/cjs/package.json

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

e2e/cases/shims/cjs/rslib.config.ts

@@ -0,0 +1,14 @@
+import { generateBundleCjsConfig } from '@e2e/helper';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [generateBundleCjsConfig()],
+  output: {
+    target: 'node',
+  },
+  source: {
+    entry: {
+      index: './src/index.ts',
+    },
+  },
+});

e2e/cases/shims/cjs/src/index.ts

@@ -0,0 +1,3 @@
+export const foo = () => {
+  console.log(import.meta.url);
+};

e2e/cases/shims/index.test.ts

@@ -16,4 +16,15 @@ test('shims for __dirname and __filename in ESM', async () => {
   }
 });
 
-test.todo('shims for import.meta.url in CJS', async () => {});
+test('shims for import.meta.url in CJS', async () => {
+  const fixturePath = join(__dirname, 'cjs');
+  const { entries } = await buildAndGetResults(fixturePath);
+  for (const shim of [
+    `var __rslib_import_meta_url__ =
+  typeof document === 'undefined' ? new (require('url'.replace('', '')).URL)('file:' + __filename).href :
+    (document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href)`,
+    'console.log(__rslib_import_meta_url__);',
+  ]) {
+    expect(entries.cjs).toContain(shim);
+  }
+});

packages/core/src/config.ts

@@ -15,6 +15,7 @@ import {
   DEFAULT_EXTENSIONS,
   SWC_HELPERS,
 } from './constant';
+import { pluginCjsShim } from './plugins/cjsShim';
 import type {
   AutoExternal,
   BannerAndFooter,
@@ -456,8 +457,16 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
       };
     case 'cjs':
       return {
+        plugins: [pluginCjsShim()],
         tools: {
           rspack: {
+            module: {
+              parser: {
+                javascript: {
+                  importMeta: false,
+                },
+              },
+            },
             output: {
               iife: false,
               chunkFormat: 'commonjs',
@@ -472,6 +481,13 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
       return {
         tools: {
           rspack: {
+            module: {
+              parser: {
+                javascript: {
+                  importMeta: false,
+                },
+              },
+            },
             output: {
               library: {
                 type: 'umd',

packages/core/src/plugins/cjsShim.ts

@@ -0,0 +1,36 @@
+import { type RsbuildPlugin, rspack } from '@rsbuild/core';
+
+const importMetaUrlShim = `var __rslib_import_meta_url__ =
+  typeof document === 'undefined' ? new (require('url'.replace('', '')).URL)('file:' + __filename).href :
+    (document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href)`;
+
+// This Rsbuild plugin will shim `import.meta.url` for CommonJS modules.
+// - Replace `import.meta.url` with `importMetaUrl`.
+// - Inject `importMetaUrl` to the end of the module (can't inject at the beginning because of `"use strict";`).
+// This is a short-term solution, and we hope to provide built-in polyfills like `node.__filename` on Rspack side.
+export const pluginCjsShim = (): RsbuildPlugin => ({
+  name: 'rsbuild-plugin-cjs-shim',
+
+  setup(api) {
+    api.modifyRsbuildConfig((config) => {
+      config.source ||= {};
+      config.source.define = {
+        ...config.source.define,
+        'import.meta.url': '__rslib_import_meta_url__',
+      };
+    });
+
+    api.modifyRspackConfig((config) => {
+      config.plugins ??= [];
+      config.plugins.push(
+        new rspack.BannerPlugin({
+          banner: importMetaUrlShim,
+          stage: rspack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE + 1,
+          raw: true,
+          footer: true,
+          include: /\.(js|cjs)$/,
+        }),
+      );
+    });
+  },
+});