[Bug]: Storybook build showing infinite spinner when 'vite' package is at '5.1.x' only on Docker

sj-dg commented 8 months ago

Describe the bug

In our in house storybook implementation we use storybook-vite for our vue components. We have a bot to bump package versions whenever a new one is available. We built our storybook UI and deploy the static site in our internal cloud using Docker.

In the build asset iframe.html, there is a line in <head> which looks like following,

<script type="module" crossorigin src="./assets/iframe-[HASH].js"></script>

This particular line is missing inside Docker container assets but on my machine that line is getting injected correctly.

Because of this missing line inside Docker container, the storybook is not able to render story files hence showing an infinite loader as shown below.

To Reproduce

Make sure along with storybook you have vite package at ">5.1.x"

In your Dockerfile

FROM node:21.4.0-alpine3.17 AS builder

COPY package.json pnpm-lock.yaml ./

RUN npm install -g pnpm && pnpm install

COPY . ./

WORKDIR /

RUN pnpm run build:storybook

FROM node:21.4.0-alpine3.17 AS runner

RUN apk add --no-cache bash

COPY --from=builder /storybook-static ./storybook-static

COPY bin/entrypoints/server.sh ./bin/entrypoints/server.sh

ENTRYPOINT ["bin/entrypoints/server.sh"]

ADD server /

RUN npm install -g pnpm && pnpm install

EXPOSE 3000

The entry point can be replaced by any http serve setup, I had used express.

System

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.4.0 - ~/.node-versions/21.4.0/bin/node
    npm: 10.2.4 - ~/.node-versions/21.4.0/bin/npm
    pnpm: 8.15.4 - ~/.node-versions/21.4.0/bin/pnpm <----- active
  Browsers:
    Chrome: 122.0.6261.94
    Edge: 122.0.2365.63
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-actions: ^7.6.17 => 7.6.17
    @storybook/addon-controls: ^7.6.17 => 7.6.17
    @storybook/addon-docs: ^7.6.17 => 7.6.17
    @storybook/addon-essentials: ^7.6.17 => 7.6.17
    @storybook/addon-interactions: ^7.6.17 => 7.6.17
    @storybook/addon-links: ^7.6.17 => 7.6.17
    @storybook/blocks: ^7.6.17 => 7.6.17
    @storybook/builder-vite: ^7.6.17 => 7.6.17
    @storybook/test: ^7.6.17 => 7.6.17
    @storybook/vue3: ^7.6.17 => 7.6.17
    @storybook/vue3-vite: ^7.6.17 => 7.6.17
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^7.6.17 => 7.6.17

Additional context

No response

sj-dg commented 7 months ago

We devised a workaround until this issue is resolved, we execute a shell script after storybook build step.

This shell script searches for the iframe-*.js file inside storybook-static/assets/ directory.

Once the file is found, we add the file via <script> tag inside storybook-static/iframe.html just before </head> tag, once that is done, the storybook docker container starts working as usual.

karo-init commented 5 months ago

Hi @sj-dg , thanks for providing a workaround. I think your description is missing the tag name before which to add the script tag. Could you add this information - or better yet attach a link to a working shell script? Thanks in advance.

sj-dg commented 5 months ago

@karo-init Sure here you go,

#!/usr/bin/env sh

# Get the name of the iframe asset file
IFRAME_ASSET_FILE_NAME=$(find ./storybook-static/assets -iname '*iframe*' | xargs -I{} basename {})

# Replace </head> with <script type="module" crossorigin src="./assets/iframe-{hash}.js"></script></head> in iframe.html
sed -i "s|</head>|<script type=\"module\" crossorigin src=\"./assets/${IFRAME_ASSET_FILE_NAME}\"></script></head>|" ./storybook-static/iframe.html

sj-dg commented 5 months ago

Hi @sj-dg , thanks for providing a workaround. I think your description is missing the tag name before which to add the script tag. Could you add this information - or better yet attach a link to a working shell script? Thanks in advance.

I added which tag we should inject this js file in my comment above. Github does not render </head> without backticks. 😄

storybookjs / storybook