[Bug]: Cannot run install Storybook using npx storybook@latest init (reproducible in Docker)

[aaronshenhao]

Describe the bug

I am trying to install Storybook in my project using the instructions provided in the official documentation. The problem I'm encountering is that it hangs indefinitely while running npx storybook@latest init:

node@97af49a3e330:/workspace$ npx storybook@latest init
Need to install the following packages:
storybook@8.4.4
Ok to proceed? (y) y

⠸ <- Hangs indefinitely

This also occurs after installing Storybook first:

package.json:

{
  "name": "storybook-example",
  "version": "1.0.0",
  "dependencies": {
    "storybook": "^8.4.4"
  }
}

node@97af49a3e330:/workspace$ npm install

added 48 packages, and audited 49 packages in 853ms

20 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
node@97af49a3e330:/workspace$ npx storybook@latest init
⠹ <- Hangs indefinitely

Reproduction link

https://github.com/aaronshenhao/storybook-init-bug

Reproduction steps

1. (Skip this step if using reproduction link). In an empty directory, create a .devcontainer directory with the following files.

   Dockerfile:

   FROM node:22
     
   # Install basic development tools
   RUN apt update && apt install -y less man-db sudo
   
   # Set up a non-root user (assuming `node` is the default user in the base image)
   ARG USERNAME=node
   ARG USER_UID=1000
   ARG USER_GID=$USER_UID
   
   # For password-less `sudo` access, uncomment the following lines
   # RUN echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
   #     && chmod 0440 /etc/sudoers.d/$USERNAME
   
   # Set UID/GID to match host user to avoid permission issues
   # Used usermod instead of useradd because the user already exists from base image
   RUN usermod -u $USER_UID $USERNAME \
       && groupmod -g $USER_GID $USERNAME
   
   # Set `DEVCONTAINER` environment variable to help with orientation
   ENV DEVCONTAINER=true

   devcontainer.json:

   {
     "name": "Storybook Example",
     "build": {
         "dockerfile": "Dockerfile"
     },
     "remoteUser": "node",
     "workspaceFolder": "/workspace",
     "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind",
   }

2. Build and reopen the project in a Dev Container in VSCode by pressing Ctrl + Shift + P, then typing "Rebuild". Select the option that says "Dev Containers: Rebuild in Dev Container".

3. Initialize storybook using either of the two methods described above.

System

`npx storybook@latest info` hangs too (after installing Storybook):

node@fdec8a075d58:/workspace$ npx storybook@latest info
⠧ <- Hangs indefinitely


The system details shouldn't be too important, since it is reproducible in a Docker container.

Additional context

The command npx storybook@latest sandbox also experiences the same issue:

node@fdec8a075d58:/workspace$ npx storybook@latest sandbox
⠹ <- Hangs indefinitely

[yannbf]

Hey @aaronshenhao this seems related to lack of input when running the command. When running a command via npx and not having that package already installed, you are asked whether you want to install it. You can see that in your logs:

node@97af49a3e330:/workspace$ npx storybook@latest init
Need to install the following packages:
storybook@8.4.4
Ok to proceed? (y) y

Because there is no input (pressing y), then it will just hang. Given that you're running inside of docker, perhaps instead of npx storybook@latest init, run CI=true npx storybook@latest init, so that it won't ask for inputs.

[aaronshenhao]

@yannbf Thanks for helping me out. The issue does still occur with CI=true npx storybook@latest init. In the original example, it does proceed and hangs at the spinner (pointed out by <- hangs indefinitely), so it's likely not due to the interaction issue. Furthermore, the issue still occurs if I install it first via npm install, then run the npx storybook@latest init (second example).

I did a bit of experimenting, and apparently the problem is due to node:22 (either the Docker image or the node version itself). Changing the base image to node:20 fixes the issue.

Changing the version can be done by changing FROM node:22 to FROM node:20, pressing Ctrl + Shift + P, typing Rebuild, and selecting Dev Containers: Rebuild Container.

I'll close it as I don't think it's a Storybook issue, but hopefully it'll be helpful for others encountering the same problem. I raised an issue in nodejs/docker-node: nodejs/docker-node#2167