[Bug] Script entries in preview-head.html not picked up by Vite during build (working during serve)

[justrhysism]

What version of vite are you using?

3.0.9

System info and storybook versions

System:
OS: macOS 12.5.1
CPU: (10) arm64 Apple M1 Max
Binaries:
Node: 16.15.1 - ~/.cache/fnm_multishells/50079_1661262794674/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.11.0 - ~/.cache/fnm_multishells/50079_1661262794674/bin/npm
Browsers:
Chrome: 104.0.5112.101
Firefox: 103.0.2
Safari: 15.6.1
npmPackages:
@storybook/addon-a11y: ^6.5.10 => 6.5.10
@storybook/addon-actions: ^6.5.10 => 6.5.10
@storybook/addon-docs: ^6.5.10 => 6.5.10
@storybook/addon-essentials: ^6.5.10 => 6.5.10
@storybook/addon-interactions: ^6.5.10 => 6.5.10
@storybook/addon-jest: ^6.5.10 => 6.5.10
@storybook/addon-links: ^6.5.10 => 6.5.10
@storybook/addons: ^6.5.10 => 6.5.10
@storybook/builder-vite: ^0.2.2 => 0.2.2
@storybook/core-common: ^6.5.10 => 6.5.10
@storybook/jest: ^0.0.10 => 0.0.10
@storybook/testing-library: ^0.0.13 => 0.0.13
@storybook/theming: ^6.5.10 => 6.5.10

Describe the Bug

We have a custom entry point(s) for our scripts and styles; to get them working, we simply added the assets to preview-head.html like:

<link rel="stylesheet" type="text/css" href="/src/main.pcss" />
<script type="module" src="/src/main.ts"></script>

When running Storybook as a server, Vite picks up these assets and everything works 👍🏼

However, when building, they are not translated in the resulting iframe.html. Indeed Vite never picks them up as they aren't compiled at all (i.e. not in the ./static-storybook directory. Output looks like:

<link rel="stylesheet" type="text/css" href="/src/main.pcss" />
<script type="module" src="/src/main.js"></script>

<script type="module" crossorigin src="/assets/iframe.ac041a9b.js"></script>

---

I don't know enough of the internal Vite workings to know for sure what's going on, but my gut feel is that it's Storybook's Vite builder config adjusting paths meaning Vite never resolves the target file (and therefore doesn't update the path in the output). More than happy to be proven wrong! 😃

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Thanks for the report, @justrhysism. To help us troubleshoot, could you create a minimal reproduction that we can experiment with?

[edikdeisling]

@IanVS hello! I faced this issue too. Here is the reproduction repo
https://github.com/edikdeisling/issue-storybook-preview-head

Reproduction steps:

1. pnpm i
2. pnpm storybook:dev
3. // text is red
4. pnpm storybook:build
5. pnpm serve-build
6. // text is not red

[JanKalkan]

+1

Vite: 4.5.0 (4.4.9 too)
Storybook: 7.5.2