Not working on Linux

[tmkx]

Background

I'm trying to add storybook tests to the CI workflow, but the rsbuild crashes due to a port duplicate:

$ storybook dev -p 6006

=> Failed to build the preview
Error: Port "6006" is occupied, please choose another one.
    at getPort (./node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2611:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getServerConfig (./node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2629:20)
    at async createDevServer (./node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:3097:33)
    at async Module.start (./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]__@_o2736jx4xxfyk5lxieepd5obtq/node_modules/storybook-builder-rsbuild/dist/index.js:572:25)
    at async storybookDevServer (./node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@storybook/core-server/dist/index.js:86:8402)
    at async buildOrThrow (./node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@storybook/core-server/dist/index.js:76:1991)
    at async buildDevStandalone (./node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@storybook/core-server/dist/index.js:165:763)
    at async withTelemetry (./node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/@storybook/core-server/dist/index.js:86:3935)
    at async dev (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_react-dom@_5kyel5bv7vemys3bvbvbl2xmyu/node_modules/@storybook/cli/dist/generate.js:989:565)

Reproduction steps

Here is a Dockerfile that describes how to build a problematic image:

FROM ubuntu:latest

ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
ENV NVM_DIR=/root/.nvm

COPY . /app

WORKDIR /app

RUN apt-get update && apt-get install -y curl && \
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
  . ~/.bashrc && nvm install && \
  corepack enable && pnpm i && pnpm build

EXPOSE 6006
CMD [ "bash", "-c", ". /root/.nvm/nvm.sh && pnpm run -C sandboxes/react-rsbuild storybook" ]

Root causes

The following code snippet works on macOS but will throw an error on Linux:

import net from 'node:net';

net.createServer().listen(6006, undefined); // @storybook/core
net.createServer().listen(6006, 'localhost'); // rsbuild dev server

https://github.com/storybookjs/storybook/blob/8505d86feeecd13a8473fa1372cf37500519d136/code/core/src/core-server/dev-server.ts#L66-L69

Workaround

storybook dev -p 6006 -h 0.0.0.0 can make storybook core listens to 0.0.0.0 while rsbuild still listens on localhost network, so that they don't running on the same hostname

[yf-yang]

Duplicates #23

[tmkx]

Storybook and rsbuild should listen to the SAME hostname and port, this relies on the middlewareMode supporting of rsbuild, not listening by itself.

@storybook/builder-webpack5: https://github.com/storybookjs/storybook/blob/3a1e61cefec8dfd350d42db5598b2d0d9159a878/code/builders/builder-webpack5/src/index.ts#L186

@storybook/builder-vite: https://github.com/storybookjs/storybook/blob/3a1e61cefec8dfd350d42db5598b2d0d9159a878/code/builders/builder-vite/src/index.ts#L66