Skip to content

Builder-Vite: Fix runtime and iframe 404 on first load#30567

Merged
valentinpalkovic merged 11 commits intonextfrom
valentin/fix-runtime-iframe-error-on-first-load
Feb 19, 2025
Merged

Builder-Vite: Fix runtime and iframe 404 on first load#30567
valentinpalkovic merged 11 commits intonextfrom
valentin/fix-runtime-iframe-error-on-first-load

Conversation

@valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Feb 18, 2025

Closes #30378

What I did

  • The preview build will now be awaited before Storybook's server starts so that all builder-specific routes and middlewares are registered
  • I've added additional packages to Vite's optimizeDeps.include configuration to avoid issues when Storybook starts up the first time.

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 pull request has been released as version 0.0.0-pr-30567-sha-f5452a43. Try it out in a new sandbox by running npx storybook@0.0.0-pr-30567-sha-f5452a43 sandbox or in an existing project with npx storybook@0.0.0-pr-30567-sha-f5452a43 upgrade.

More information
Published version 0.0.0-pr-30567-sha-f5452a43
Triggered by @valentinpalkovic
Repository storybookjs/storybook
Branch valentin/fix-runtime-iframe-error-on-first-load
Commit f5452a43
Datetime Wed Feb 19 10:52:58 UTC 2025 (1739962378)
Workflow run 13410852699

To request a new release of this pull request, mention the @storybookjs/core team.

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

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 80.5 MB 80.5 MB 29 kB -1.4 0%
initSize 80.5 MB 80.5 MB 29 kB -1.4 0%
diffSize 97 B 97 B 0 B - 0%
buildSize 7.31 MB 7.31 MB -395 B -1.58 0%
buildSbAddonsSize 1.9 MB 1.9 MB 380 B 0.23 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.88 MB 1.88 MB -692 B -0.23 0%
buildSbPreviewSize 0 B 0 B 0 B - -
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.97 MB 3.97 MB -312 B -0.23 0%
buildPreviewSize 3.34 MB 3.34 MB -83 B -18.76 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 15.9s 26.9s 11s 1.79 🔺40.9%
generateTime 20.8s 18.6s -2s -250ms -0.86 -12.1%
initTime 4.7s 4.2s -532ms -1.15 -12.7%
buildTime 10.5s 8.5s -2s -37ms -0.99 -23.9%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 5.1s 4.6s -519ms -1.5 🔰-11.3%
devManagerResponsive 3.8s 4.4s 562ms 0.57 12.7%
devManagerHeaderVisible 871ms 757ms -114ms -0.37 -15.1%
devManagerIndexVisible 907ms 768ms -139ms -0.49 -18.1%
devStoryVisibleUncached 4.1s 1.8s -2s -369ms -4.29 🔰-131.3%
devStoryVisible 907ms 786ms -121ms -0.57 -15.4%
devAutodocsVisible 841ms 755ms -86ms -0.34 -11.4%
devMDXVisible 823ms 683ms -140ms -1.1 -20.5%
buildManagerHeaderVisible 683ms 602ms -81ms -1.65 🔰-13.5%
buildManagerIndexVisible 695ms 630ms -65ms -1.66 🔰-10.3%
buildStoryVisible 667ms 590ms -77ms -1.54 🔰-13.1%
buildAutodocsVisible 620ms 543ms -77ms -0.78 -14.2%
buildMDXVisible 571ms 519ms -52ms -1.34 🔰-10%

Greptile Summary

Added new dependencies to Vite's optimizeDeps configuration to prevent runtime and iframe 404 errors that occur on first load of Storybook.

  • Added @storybook/addon-interactions/preview to INCLUDE_CANDIDATES in code/builders/builder-vite/src/optimizeDeps.ts
  • Added react/jsx-dev-runtime to INCLUDE_CANDIDATES for proper React development runtime support
  • Ensures Vite pre-bundles CommonJS dependencies that need ESM conversion
  • Fixes startup issues reported in versions after Storybook 8.3.5

@valentinpalkovic valentinpalkovic marked this pull request as ready for review February 18, 2025 13:46
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

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

@nx-cloud
Copy link

nx-cloud bot commented Feb 18, 2025

View your CI Pipeline Execution ↗ for commit b7126ab.

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

☁️ Nx Cloud last updated this comment at 2025-02-19 14:00:55 UTC

@storybook-bot
Copy link
Contributor

Failed to publish canary version of this pull request, triggered by @valentinpalkovic. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/13400680087

@valentinpalkovic valentinpalkovic force-pushed the valentin/fix-runtime-iframe-error-on-first-load branch from 561edf3 to f39169d Compare February 19, 2025 08:21
@storybook-app-bot
Copy link

storybook-app-bot bot commented Feb 19, 2025

Package Benchmarks

Commit: b7126ab, ran on 19 February 2025 at 14:07:25 UTC

The following packages have significant changes to their size or dependencies:

@storybook/core

Before After Difference
Dependency count 52 52 0
Self size 19.26 MB 19.25 MB 🎉 -1 KB 🎉
Dependency size 14.26 MB 14.19 MB 🎉 -62 KB 🎉
Bundle Size Analyzer Link Link

storybook

Before After Difference
Dependency count 53 53 0
Self size 23 KB 23 KB 0 B
Dependency size 33.51 MB 33.45 MB 🎉 -63 KB 🎉
Bundle Size Analyzer Link Link

sb

Before After Difference
Dependency count 54 54 0
Self size 1 KB 1 KB 0 B
Dependency size 33.54 MB 33.47 MB 🎉 -63 KB 🎉
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 359 359 0
Self size 279 KB 279 KB 0 B
Dependency size 84.00 MB 83.94 MB 🎉 -63 KB 🎉
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 275 275 0
Self size 612 KB 612 KB 🎉 -6 B 🎉
Dependency size 65.58 MB 65.52 MB 🎉 -63 KB 🎉
Bundle Size Analyzer Link Link

@valentinpalkovic valentinpalkovic changed the title Builder-Vite: Extend optimizeDeps.include config Builder-Vite: Fix runtime and iframe 404 on first load Feb 19, 2025
@valentinpalkovic valentinpalkovic merged commit 6de6c57 into next Feb 19, 2025
59 of 60 checks passed
@valentinpalkovic valentinpalkovic deleted the valentin/fix-runtime-iframe-error-on-first-load branch February 19, 2025 14:35
@github-actions github-actions bot mentioned this pull request Feb 19, 2025
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: runtime and iframe 404 on first load

3 participants