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

[blksnk]

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.

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

---

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

[omidantilong]

We're experiencing this too running [email protected] - we can log out the resolved config before and after calling mergeConfig and see the options are there, but they are not being honoured in the final built output.

This feels like a regression of storybookjs/builder-vite#238 unless we're missing something obvious?

[omidantilong]

We're also seeing a 404 for the <link> tag that references ./sb-preview/runtime.js — the suggested fix for this problem takes a similar approach, using viteFinal to modify the config.

But that's not working for us either. The issues feel kind of related, like Storybook is not merging configs correctly?

As it stands, that directory just doesn't exist in the storybook-static directory after building.