Error: Port is occupied when starting from container

[yf-yang]

I tried to migrate the example to our workspace. It is a vscode editor + docker container. Then I found when executing storybook in the container, the port would be occupied before rsbuild dev server is created.

I haven't created something reproducible yet, so it might not be an issue with container environment.

Current observation:
By adding breakpoints, here

storybook-rsbuild/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts

Lines 73 to 77 in d21f101

	await readTemplate(
	require.resolve(
	'storybook-builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars',
	),
	),

When readTemplate get executed, a browser window pops up. That's where two environment diverges. If I run storybook natively in the laptop, there is no port occupation. If I execute it in the container, after it executes, the port gets occupied, so rsbuild dev server would stop.

I'll continue investigating it. Do you have any idea what storybook does here and what is its possible cause?

[yf-yang]

I don't quite understand what readTemplate does here. It should be a helper that calls fs.readFile, then how does it open the browser and occupies the port? It is an intercepted API? I may understand what happens if I know how it opens the browser.

https://github.com/storybookjs/storybook/blob/41fd263fb420e61cf90388964d6fad02dfae075f/code/lib/core-common/src/utils/readTemplate.ts#L4

[yf-yang]

Reproduction: https://github.com/yf-yang/rsbuild-storybook-esm/tree/container-bug
Steps:

1. Open the folder with vscode
2. Show all commands (command/ctrl + shift + p)
3. Select "reopen in container"

Then it would use the ubuntu22.04 image to create a container and install node/pnpm
After the container is set

4. pnpm i
5. pnpm storybook

I've added breakpoints myself and found after readTemplate, before rsbuild dev server is up, the port is already occupied.

Alternatively (if not using devcontainer),
docker run -it -v $(pwd):/workspace -w /workspace node:22.3.0 /bin/bash
Then,

npm i
npm run storybook

[yf-yang]

Additional information:

By adding BROWSER=none (storybookjs/storybook#6201 (comment)) and starts cli, it reports Error: spawn none ENOENT. It may help debugging. I guess current implementation has something different with webpack, but I don't go through the storybook source code deeply.

[fi3ework]

I did reproduce the issue, when running without Docker, there could be two process listening the same port whereas in Docker it throws. I'm not sure does webpack/Vite builder will fail in Docker, either.

[yf-yang]

I used webpack builder + container previously, but I am reluctant to reproduce it 🤨.
Currently, I patch the package with strictPort=false, so for example, sb starts at 6006, rsbuild dev server starts at 6007, then 6006 is accessible, changes are taking effect after refreshing, too.

I don't know what dev server does here, but based on the observation it doesn't need to be exposed. (Maybe the claim is wrong, since outside of a container, a port is still needed).

[CptLemming]

Coming from WSL and also getting the port in use error. If I edit the start function to strictPort: false as suggested Storybook starts with the warning:

info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
info Port 9001 is in use, using port 9002.

However in the browser log I see:

hmr.js:237 WebSocket connection to 'ws://localhost:9002/rsbuild-hmr' failed:

There doesn't appear to be any server running on 9002, so I guess the error is valid. I get the same startup error if I run the example "react-rsbuild" sandbox app if that helps.