search

rspack-contrib / storybook-rsbuild

Storybook builder powered by Rsbuild.
MIT License
48 stars 1 forks source link

Not working on Linux #32

Closed tmkx closed 5 days ago

tmkx commented 2 weeks ago

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/@rsbuild+core@0.7.9/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/@rsbuild+core@0.7.9/node_modules/@rsbuild/core/dist/index.cjs:2629:20)
    at async createDevServer (./node_modules/.pnpm/@rsbuild+core@0.7.9/node_modules/@rsbuild/core/dist/index.cjs:3097:33)
    at async Module.start (./node_modules/.pnpm/storybook-builder-rsbuild@0.0.6_@rsbuild+core@0.7.9_@rspack+core@0.7.4_@swc+helpers@0.5.11__@_o2736jx4xxfyk5lxieepd5obtq/node_modules/storybook-builder-rsbuild/dist/index.js:572:25)
    at async storybookDevServer (./node_modules/.pnpm/@storybook+core-server@8.1.10_encoding@0.1.13_prettier@3.3.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@storybook/core-server/dist/index.js:86:8402)
    at async buildOrThrow (./node_modules/.pnpm/@storybook+core-server@8.1.10_encoding@0.1.13_prettier@3.3.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@storybook/core-server/dist/index.js:76:1991)
    at async buildDevStandalone (./node_modules/.pnpm/@storybook+core-server@8.1.10_encoding@0.1.13_prettier@3.3.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@storybook/core-server/dist/index.js:165:763)
    at async withTelemetry (./node_modules/.pnpm/@storybook+core-server@8.1.10_encoding@0.1.13_prettier@3.3.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@storybook/core-server/dist/index.js:86:3935)
    at async dev (./node_modules/.pnpm/@storybook+cli@8.1.10_@babel+preset-env@7.24.7_@babel+core@7.24.7__encoding@0.1.13_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 commented 1 week ago

Duplicates https://github.com/rspack-contrib/storybook-rsbuild/issues/23

tmkx commented 5 days ago

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