Skip to content

[Bug]: In dev mode queueMicrotask is not defined in ESM environment #7826

@sibbng

Description

@sibbng

System Info

System:
OS: Windows 10 10.0.19045
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 1.82 GB / 7.83 GB
Binaries:
Node: 22.6.0 - ~\AppData\Local\fnm_multishells\14848_1725611723399\node.EXE
npm: 10.8.2 - ~\AppData\Local\fnm_multishells\14848_1725611723399\npm.CMD
pnpm: 9.7.0 - ~\AppData\Local\fnm_multishells\14848_1725611723399\pnpm.CMD
bun: 1.1.21 - ~.bun\bin\bun.EXE
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.19041.4355
npmPackages:
@rspack/core: 1.0.3 => 1.0.3

Details

Hi, I'm using Rsbuild environment API to build a client and a server. There are 3 problems with my repro:

  1. queueMicrotask is not defined in ESM environment during dev
    I enforced both bundle to output ESM (disabled esm on client since rsbuild can't output <script type="module">). But for some reason queueMicrotask is not available in ESM environment during dev. If I configure my ssr environment to output in CJS, it works as expected and no error. Only in ESM and dev mode this error raises.

image

  1. Even though I have "type": "module" in my package.json, Rspack trying to load a module as CJS module. So I had to add this config in my config:
        filename: {
          js: "[name].mjs",
        },

image

  1. If I configure dist path something that starts with a dot (.), printed URLs are weird:
      output: {
        inlineStyles: true,
        inlineScripts: true,
        distPath: {
          root: ".output/client",
        },
        cleanDistPath: true,
        target: "web",
      },
  > Local:    http://localhost:3000/../C:\Users\user\dev\vobyssr\apps\web\.output\client/

Reproduce link

https://github.com/sibbng/voby-ssr-demo

Reproduce Steps

  1. pnpm i
  2. pnpm build
  3. pnpm dev
  4. Visit localhost:3000
  5. Check console you will see ReferenceError: queueMicrotask is not defined

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions