[Bug]: Storybook 8.4 cannot serve static assets declared by file

[jackw]

Describe the bug

Storybook config accepts as staticDirs property objects of {from: 'path', to: 'path2'} but prior to storybook 8.4 it could also resolve directly to files. e.g.

    {
      from: "../some/directory/of/images/react-icon.svg",
      to: "/assets/images/react-icon.svg",
    },

Storybook 8.4 however cannot resolve the image and attempts to render a broken html page when opening the URL directly. We specify images directly in the staticDirs config property to limit the number of assets that are uploaded to a cloud bucket at release time as uploading the entire folder was causing rate limits to kick in with our cloud provider.

Reproduction link

https://github.com/jackw/storybook-84-asset-bug

Reproduction steps

1. Clone the above repo (based on the chromaui/intro-storybook-react-template template)
2. run yarn install
3. run yarn storybook
4. Note the theme brandImage should be the react icon.
5. Switch to the branch storybook-8.4
6. run yarn install
7. run yarn storybook
8. Note the theme branchImage is now a broken image.

System

Storybook Environment Info:

  System:
    OS: macOS 15.0.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn <----- active
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.12.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 18.0.1
  npmPackages:
    @storybook/addon-essentials: ^8.4.2 => 8.4.2
    @storybook/addon-interactions: ^8.4.2 => 8.4.2
    @storybook/addon-links: ^8.4.2 => 8.4.2
    @storybook/blocks: ^8.4.2 => 8.4.2
    @storybook/react: ^8.4.2 => 8.4.2
    @storybook/react-vite: ^8.4.2 => 8.4.2
    @storybook/test: ^8.4.2 => 8.4.2
    eslint-plugin-storybook: ^0.11.0 => 0.11.0
    msw-storybook-addon: ^2.0.4 => 2.0.4
    storybook: ^8.4.2 => 8.4.2

Additional context

I haven't had the chance to dig too much into it but my instinct suggests this was caused by migrating from express to polka in #29230 and the use of sirv which appears to only handle directories.

[samvloeberghs]

Additionally I would like to add that it appears we can't configure mappings originating from /node_modules anymore.
Just wanted to drop that here, will create a dedicated issue report in a few weeks if this is not really related.

[valentinpalkovic]

@JReinhold Can this be related to the fs-extra removal?

[JReinhold]

I'm pretty sure OP is correct that this is related to sirv.

FWIW passing in file paths (as opposed to directory paths) has never been officially supported nor documented, I guess it just worked by chance because of the underlying implementation.

These are the docs I could find on staticDirs, and all of them exclusively mention directories:

• https://storybook.js.org/docs/api/main-config/main-config-static-dirs
• https://storybook.js.org/docs/configure#configure-your-storybook-project
• https://storybook.js.org/docs/configure/integration/images-and-assets#serving-static-files-via-storybook-configuration