Builder-Vite: Fix resolve id warning

[valentinpalkovic]

Closes #30480

What I did

import.meta.hot.accept calls in Vite are supposed to only accept module ids. Since our virtual file namings contain a leading forward slash, the virtual id which we were passing to import.meta.hot.accept was interpreted as an url, leading to the warning described in the linked issue. Additionally, we have applied a workaround to not break Chromatic's Turbosnap implementation in the Chromatic CLI.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	80.5 MB	80.5 MB	0 B	1.26	0%
initSize	80.5 MB	80.5 MB	0 B	-0.79	0%
diffSize	97 B	97 B	0 B	-0.82	0%
buildSize	7.24 MB	7.24 MB	0 B	0.93	0%
buildSbAddonsSize	1.87 MB	1.87 MB	0 B	0.54	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	0 B	0.33	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.94 MB	3.94 MB	0 B	0.47	0%
buildPreviewSize	3.3 MB	3.3 MB	0 B	1.2	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.6s	6.6s	-1s -14ms	-0.96	-15.3%
generateTime	18.7s	16.9s	-1s -809ms	-2.16	🔰-10.7%
initTime	4.7s	4.1s	-551ms	-0.93	-13.2%
buildTime	8.7s	8s	-716ms	-1.24	🔰-8.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.1s	5.5s	417ms	0.24	7.5%
devManagerResponsive	3.8s	4.2s	404ms	0.54	9.5%
devManagerHeaderVisible	761ms	924ms	163ms	1.07	17.6%
devManagerIndexVisible	829ms	965ms	136ms	1.13	14.1%
devStoryVisibleUncached	4.1s	3.1s	-1s -61ms	-2.78	🔰-34.2%
devStoryVisible	828ms	966ms	138ms	0.94	14.3%
devAutodocsVisible	778ms	773ms	-5ms	0.16	-0.6%
devMDXVisible	643ms	736ms	93ms	-0.05	12.6%
buildManagerHeaderVisible	859ms	717ms	-142ms	-0.43	-19.8%
buildManagerIndexVisible	982ms	742ms	-240ms	-0.58	-32.3%
buildStoryVisible	793ms	641ms	-152ms	-0.49	-23.7%
buildAutodocsVisible	619ms	640ms	21ms	-0.25	3.3%
buildMDXVisible	625ms	777ms	152ms	0.83	19.6%

Greptile Summary

This PR addresses a warning in Vite's hot module replacement system by fixing virtual module ID resolution in the Storybook Vite builder.

• Modified virtual file paths in code/builders/builder-vite/src/virtual-file-names.ts to remove leading forward slashes, preventing incorrect URL interpretation
• Updated code/builders/builder-vite/src/codegen-modern-iframe-script.ts to properly handle virtual module IDs in HMR calls
• Adjusted code/builders/builder-vite/input/iframe.html script path format for proper module resolution
• Added compatibility handling in code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts to maintain Chromatic's TurboSnap functionality

[greptile-apps]

_{6 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 42ae010.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 49s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-11 09:14:23 UTC

[jdavis-software]

@valentinpalkovic you are the man!