[Bug]: `require` call appears in ESM output when there’s a dynamic import.

[xc2]

Version

  System:
    OS: macOS 15.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 72.34 MB / 32.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 18.1
  npmPackages:
    @rslib/core: 0.0.8 => 0.0.8

Details

I'm using dynamic import in a Node.js package and bundling it into an esm output. The code looks like:

export async function reproduction(input: string) {
  const { default: fnv1a } = await import(
    /* webpackChunkName: "_sindresorhus_fnv1a" */ "@sindresorhus/fnv1a"
  );
  console.log(`

      fnv1a hash of "${input}" is "${fnv1a(input, { size: 32 }).toString(16)}"

`);
}

Note: @sindresorhus/fnv1a here is introduced as devDependencies as I'd like it bundled into my package.

rslib.config.ts is deadly simple

import { defineConfig } from "@rslib/core";

export default defineConfig({
  source: {
    entry: {
      index: "./src/index.ts",
    },
  },
  output: {
    target: "node",
    sourceMap: {
      js: "source-map",
    },
    minify: { js: false },
    distPath: {
      root: "./dist",
    },
  },
  lib: [
    {
      format: "esm",
      dts: false,
      autoExtension: false,
      output: {
        filename: {
          js: "[name].mjs",
        },
      },
    },
  ],
});

The usage is like

import { reproduction } from "cacheable-crawlee";

await reproduction("it works");

which raises

file:///Users/kfll/Developer/crawlee-cache/dist/index.mjs:97
                        installChunk(require("./" + __webpack_require__.u(chunkId)));
                        ^

ReferenceError: require is not defined in ES module scope, you can use import instead
    at __webpack_require__.f.require (file:///Users/kfll/Developer/crawlee-cache/dist/index.mjs:97:4)
    at file:///Users/kfll/Developer/crawlee-cache/dist/index.mjs:48:30
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (file:///Users/kfll/Developer/crawlee-cache/dist/index.mjs:47:38)
    at reproduction (file:///Users/kfll/Developer/crawlee-cache/dist/index.mjs:108:58)
    at file:///Users/kfll/Developer/crawlee-cache/module-test.mjs:3:7
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:123:5)

Node.js v20.17.0

Reproduce link

https://github.com/xc2/cacheable-crawlee/blob/repro-rslib-module/rslib.config.mts

Reproduce Steps

Prepare

1. Clone the repro and checkout repro-rslib-module branch: git clone -b repro-rslib-module https://github.com/xc2/cacheable-crawlee.git
2. Execute pnpm i

Rslib

1. Execute pnpm build && node module-test.mjs to see the error

Rspack which works as expected

1. Execute node rspack-build.mjs && node module-test.mjs

[fi3ework]

I checked webpack's source and found it doesn't consider "module": true for installing async modules. https://github.com/webpack/webpack/blob/main/lib/node/RequireChunkLoadingRuntimeModule.js#L156. We need to fix that alongside.

Currently, a workaround is disabling async chunks

      tools: {
        rspack: {
          output: {
            asyncChunks: false,
          },
        },
      },

[xc2]

I expect it emitting a separate chunk for the dynamic import, just as the rspack-build.mjs outputs.

any idea?

[fi3ework]

I checked it twice, you could add following code to your ESM lib config and it will work. This should be processed internally with Rslib, we're setting node's chunkLoading to require now https://github.com/web-infra-dev/rslib/blob/main/packages/core/src/config.ts#L778 which is not correct. Going to fix this soon. Thanks for the feedback!

      tools: {
        rspack: {
          output: {
            chunkLoading: 'import',
          },
        },
      },

[xc2]

@fi3ework thank you very much, it works like a charm. ❤️