storybookjs/storybook

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

Open

#26319 opened on Mar 5, 2024

View on GitHub
 (4 comments) (2 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugcompatibility with other toolshelp wanted

Description

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

Contributor guide

Tech stack
vuevitedockertypescript
Domain
frontendbuild systemdevops
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
DockerVite build setupStorybook basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate why the <script> tag with module crossorigin is missing in iframe.html when built inside Docker. Compare Docker build environment vs local. Check if Vite 5.1.x behaves differently in Docker. Look at storybook builder vite output generation. Possibly test with different Vite versions.