Vite: Fix add component UI invalidation

[shilman]

Closes #30431

What I did

Fix "add component UI" in Vite

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

1. Run yarn storybook:ui (or a sandbox)
2. Add a new component from the UI

Before the change, you'll see the error described in the issue. With the change, the new story will render successfully

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	78 MB	78 MB	395 B	2.74	0%
initSize	131 MB	131 MB	451 B	2.33	0%
diffSize	53 MB	53 MB	56 B	1.43	0%
buildSize	7.17 MB	7.17 MB	0 B	-0.25	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	0.82	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	0 B	-0.34	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	0 B	-0.25	0%
buildPreviewSize	3.26 MB	3.26 MB	0 B	-0.25	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	8.8s	24.4s	15.5s	0.72	63.7%
generateTime	20.7s	17.8s	-2s -925ms	-1.57	🔰-16.4%
initTime	13.6s	11.2s	-2s -447ms	-1.53	🔰-21.8%
buildTime	9.5s	8s	-1s -471ms	-1.04	-18.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.9s	4.8s	-130ms	-0.42	-2.7%
devManagerResponsive	3.7s	3.7s	8ms	-0.25	0.2%
devManagerHeaderVisible	791ms	709ms	-82ms	-0.06	-11.6%
devManagerIndexVisible	883ms	774ms	-109ms	0.03	-14.1%
devStoryVisibleUncached	3.6s	3.8s	201ms	0.79	5.3%
devStoryVisible	819ms	775ms	-44ms	0.01	-5.7%
devAutodocsVisible	681ms	688ms	7ms	0.13	1%
devMDXVisible	705ms	650ms	-55ms	-0.08	-8.5%
buildManagerHeaderVisible	864ms	865ms	1ms	0.35	0.1%
buildManagerIndexVisible	955ms	949ms	-6ms	0.27	-0.6%
buildStoryVisible	808ms	710ms	-98ms	-0.09	-13.8%
buildAutodocsVisible	577ms	614ms	37ms	-0.21	6%
buildMDXVisible	690ms	559ms	-131ms	-0.09	-23.4%

Greptile Summary

This PR fixes an issue with the Vite builder's "add component UI" functionality where new stories failed to render properly without a browser refresh.

• Fixed HMR invalidation in code/builders/builder-vite/src/plugins/code-generator-plugin.ts by using resolved virtual module ID when emitting change events for new story files
• Modified watcher.on('add') handler to properly trigger HMR updates when new .stories files are added
• Ensures proper story rendering when adding components through Storybook's UI without requiring manual browser refresh
• Addresses "importers[path] is not a function" error that occurred when adding new components

[greptile-apps]

LGTM

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit cc7d0f5.

Command	Status	Duration	Result
nx affected -t check -c production --parallel=7	✅ Succeeded	15s	View ↗
nx run-many -t build -c production --parallel=3	✅ Succeeded	32s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-01 15:10:16 UTC