Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: React-vite: Essential addons do not respect config.base nor config.publicDir #30434

Open
blksnk opened this issue Jan 31, 2025 · 0 comments

Comments

@blksnk
Copy link

blksnk commented Jan 31, 2025

Describe the bug

Since upgrading to storybook 8.4.5 from 8.2.9, our custom theming seems not to take effect in the built bundle.
Upon investigating the network requests made by the hosted Storybook, it seems some calls to manager-bundle.js do not take the publicDir configuration option into account, while most others do.

The first few calls do not take config.publicDir into account. These originate from script tags embedded in the index.html.

Image

While calls originating from js files do take it into account.

Image


Our built storybook can be found here, the above screenshot were taken from this page's devtools.

Reproduction link

https://stackblitz.com/edit/github-tvfaqaeh?file=.storybook%2Fmain.ts&view=editor

Reproduction steps

  1. Set config.base and config.publicDir in viteFinal
  2. Customize the theme
  3. Build storybook
  4. Host / serve the bundle
  5. The theme is not applied

System

Storybook Environment Info:

  System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - ~/.nvm/versions/node/v21.7.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v21.7.1/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.1/bin/npm
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 18.1
  npmPackages:
    @storybook/addon-docs: ^8.4.5 => 8.5.2
    @storybook/addon-essentials: ^8.4.5 => 8.5.2
    @storybook/addon-interactions: ^8.4.5 => 8.5.2
    @storybook/addon-links: ^8.4.5 => 8.5.2
    @storybook/addon-measure: ^8.4.5 => 8.5.2
    @storybook/addon-outline: ^8.4.5 => 8.5.2
    @storybook/addon-themes: ^8.4.5 => 8.5.2
    @storybook/addon-viewport: ^8.4.5 => 8.5.2
    @storybook/blocks: ^8.4.5 => 8.5.2
    @storybook/icons: ^1.2.10 => 1.3.2
    @storybook/manager-api: ^8.4.5 => 8.5.2
    @storybook/react: ^8.4.5 => 8.5.2
    @storybook/react-vite: ^8.4.5 => 8.5.2
    @storybook/test: ^8.4.5 => 8.5.2
    @storybook/theming: ^8.4.5 => 8.5.2
    eslint-plugin-storybook: ^0.11.2 => 0.11.2
    storybook: ^8.4.5 => 8.5.2

Additional context

We use Storybook's react+vite+ts flavor for our internal uikit's documentation, and theme it using "@storybook/theming/create" and .storybook/manager.ts.
Once built, we host our storybook under the /design-system route on our website.
As such, we've set the following configuration options in .storybook/main.ts

import { mergeConfig } from "vite";

export default {
  // ... other configuration
  viteFinal: (config) => {
    const overrides  = {
      base: "/design-system"
      publicDir: "/design-system"
    }
    return mergeConfig(config, overrides);
  }
}

Explored potential fixes

These are the things we tried to fix this issue, to no avail:

  • Setting config.build.outDir - Did change the output directory of the bundle, did not change links
  • Running storybook build with the -o flag - Same as above
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs Discussion
Development

No branches or pull requests

2 participants