[Bug]: Upgrading from 8.1.11 fails on Vue app running in Docker

paulrosen commented 3 months ago

Describe the bug

I discovered this problem when upgrading Storybook to 8.2.6. I had been happily using storybook for a couple years in this app.

I decided to create a completely new app as a minimal test and I get the same error.

A summary of what i did: 1) started a docker container 2) created a Vue app using the recommended Vue instructions 3) added Storybook using the recommended instructions Result: an error when attempting to start Storybook.

(The reproduction link field doesn't make sense in this case because this happens purely on the command line as storybook starts.)

Reproduction link

https://github.com/storybookjs/storybook/issues/new

Reproduction steps

My Docker file is:

FROM node:20.14.0

RUN apt-get update

RUN npm install -g nodemon

RUN npm install -g npm@10.8.2

RUN mkdir /srv/app && chown node:node /srv/app

WORKDIR /srv/app

This is the entire command line of what happened:

$ docker compose run  --publish 6006:6006 --name=nmpstory --rm app bash
root@0c03b6239347:/srv/app# cd temp/
root@0c03b6239347:/srv/app/temp# npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y

> npx
> create-vue

Vue.js - The Progressive JavaScript Framework

✔ Project name: … sbtest
✔ Add TypeScript? … No / Yes # I chose Yes
✔ Add JSX Support? … No / Yes # I chose no
✔ Add Vue Router for Single Page Application development? … No / Yes # I chose Yes
✔ Add Pinia for state management? … No / Yes # I chose Yes
✔ Add Vitest for Unit Testing? … No / Yes # I chose Yes
✔ Add an End-to-End Testing Solution? › No 
✔ Add ESLint for code quality? … No / Yes # I chose Yes
✔ Add Prettier for code formatting? … No / Yes # I chose No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes # I chose No

Scaffolding project in /srv/app/temp/sbtest...

Done. Now run:

  cd sbtest
  npm install
  npm run dev

root@0c03b6239347:/srv/app/temp# cd sbtest/
root@0c03b6239347:/srv/app/temp/sbtest# npx storybook@latest init
Need to install the following packages:
storybook@8.2.6
Ok to proceed? (y) y

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.2.6 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead

added 336 packages, and audited 337 packages in 2m

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

found 0 vulnerabilities
 • Adding Storybook support to your "Vue 3" app • Detected Vite project. Setting builder to Vite. ✓

  ✔ Getting the correct version of 10 packages
    Configuring Storybook ESLint plugin at .eslintrc.cjs
  ✔ Installing Storybook dependencies
. ✓
Installing dependencies...

up to date, audited 872 packages in 980ms

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

found 0 vulnerabilities

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook

> sbtest@0.0.0 storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet

storybook v8.2.6

info => Starting manager..
info => Starting preview..
/srv/app/temp/sbtest/node_modules/storybook/bin/index.cjs:23
  throw error;
  ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:6006/?path=/onboarding' ]
}

Node.js v20.14.0
root@0c03b6239347:/srv/app/temp/sbtest# npm run storybook

> sbtest@0.0.0 storybook
> storybook dev -p 6006

storybook v8.2.6

info => Starting manager..
info => Starting preview..
/srv/app/temp/sbtest/node_modules/storybook/bin/index.cjs:23
  throw error;
  ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:6006/' ]
}

Node.js v20.14.0
root@0c03b6239347:/srv/app/temp/sbtest#

System

Storybook Environment Info:

  System:
    OS: Linux 6.6 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (10) arm64 unknown
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.14.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
  npmPackages:
    @storybook/addon-essentials: ^8.2.6 => 8.2.6
    @storybook/addon-interactions: ^8.2.6 => 8.2.6
    @storybook/addon-links: ^8.2.6 => 8.2.6
    @storybook/addon-onboarding: ^8.2.6 => 8.2.6
    @storybook/blocks: ^8.2.6 => 8.2.6
    @storybook/test: ^8.2.6 => 8.2.6
    @storybook/vue3: ^8.2.6 => 8.2.6
    @storybook/vue3-vite: ^8.2.6 => 8.2.6
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.2.6 => 8.2.6

Additional context

No response

greptile-apps[bot] commented 3 months ago

Disclaimer This information might be inaccurate, due to it being generated automatically The error spawn xdg-open ENOENT indicates that the xdg-open command is missing in your Docker container. This command is used to open URLs in the default web browser on Linux systems. To resolve this issue, you need to install the xdg-utils package in your Docker container. Update your Dockerfile as follows:

FROM node:20.14.0

RUN apt-get update && apt-get install -y xdg-utils

RUN npm install -g nodemon
RUN npm install -g npm@10.8.2

RUN mkdir /srv/app && chown node:node /srv/app

WORKDIR /srv/app

This will ensure that the xdg-open command is available when Storybook tries to open the URL.

References

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

paulrosen commented 3 months ago

The robot suggestion above got rid of the error. I ran into another error after that, but it is probably a different issue and I'll report that separately if I can't figure it out.

lukaszarpak commented 3 months ago

I experience exactly the same error with exactly the same setup. I noticed it happens only inside of a docker container. When I run the storybook command outside of the container (M1 Mac, macOS Sonoma 14.5) it works seamlessly.

paulrosen commented 3 months ago

It's been running ok for a day now, so the answer does seem to be to change my docker file to this:

FROM node:20.14.0

RUN apt-get update

RUN apt-get install -y xdg-utils # For Storybook

RUN npm install -g nodemon

RUN npm install -g npm@10.8.2

RUN mkdir /srv/app && chown node:node /srv/app

WORKDIR /srv/app

I don't know if there is a way to make the error message clearer or to add something to the docs.

lukaszarpak commented 3 months ago

I tried with another version of Node, 18.19.0, but there still was the same error. I suppose the error isn't caused by Node itself but rather there's a regression in Storybook v8.

Bot's suggestion seems to solve the problem inside of a docker container though.

RomainMorlevat commented 3 months ago

I have the same issue on a Toolbx container when trying to run yarn storybook after upgrading it. This seems to be because Storybook tries to open the browser when starting its server. You can try with the option --no-open; it solved the issue for me.

lukaszarpak commented 3 months ago

@RomainMorlevat yeah it actually seems to solve the problem.

So with --no-open option those two lines are obsolete in a Dockerfile for Storybook:

RUN apt-get update

RUN apt-get install -y xdg-utils # For Storybook

storybookjs / storybook