Vite: Support Vite 8#33788
Merged
Merged
Conversation
|
View your CI Pipeline Execution ↗ for commit d34f3fc
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit e33dc0d ☁️ Nx Cloud last updated this comment at |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds Vite 8 compatibility: updates Vite peer ranges across multiple packages, introduces Vite-version-aware bundler option handling (choosing rolldownOptions vs rollupOptions) in builder-vite and its plugin, and refactors sandbox Yarn tooling to detect Vite sandboxes and apply targeted workaround resolutions. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@scripts/tasks/sandbox-parts.ts`:
- Around line 150-153: The current conditional guards the call to
addWorkaroundResolutions with isViteSandbox, which prevents non‑Vite sandboxes
from receiving React19/testing-library pins; remove the isViteSandbox check and
call addWorkaroundResolutions({ cwd, dryRun, debug, key }) unconditionally so
the function can apply its general pins and internally handle any Vite‑specific
overrides (refer to addWorkaroundResolutions and isViteSandbox to locate the
change).
Comment on lines
+150
to
153
| // Add workaround resolutions for vite-based sandboxes | ||
| if (isViteSandbox(key)) { | ||
| await addWorkaroundResolutions({ cwd, dryRun, debug, key }); | ||
| } |
Contributor
There was a problem hiding this comment.
Guarding addWorkaroundResolutions may skip non‑Vite workarounds.
addWorkaroundResolutions also applies React 19 and testing-library pins for non‑Vite keys (e.g., nextjs/*, react-rsbuild/default-ts). Gating the call by isViteSandbox means those sandboxes won’t receive these resolutions in non‑link mode, which can regress installs.
Consider calling addWorkaroundResolutions unconditionally here and letting its internal Vite-specific override handle the Vite pin.
🔧 Suggested change
- // Add workaround resolutions for vite-based sandboxes
- if (isViteSandbox(key)) {
- await addWorkaroundResolutions({ cwd, dryRun, debug, key });
- }
+ await addWorkaroundResolutions({ cwd, dryRun, debug, key });🤖 Prompt for AI Agents
In `@scripts/tasks/sandbox-parts.ts` around lines 150 - 153, The current
conditional guards the call to addWorkaroundResolutions with isViteSandbox,
which prevents non‑Vite sandboxes from receiving React19/testing-library pins;
remove the isViteSandbox check and call addWorkaroundResolutions({ cwd, dryRun,
debug, key }) unconditionally so the function can apply its general pins and
internally handle any Vite‑specific overrides (refer to addWorkaroundResolutions
and isViteSandbox to locate the change).
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@code/builders/builder-vite/src/utils/vite-features.ts`:
- Around line 20-28: The function ensureRolldownOptions accesses config.build
unguarded; ensure config.build exists before touching rolldownOptions by
initializing config.build if undefined (e.g., set config.build = {} or use the
nullish assignment operator) and then proceed to create rolldownOptions and
output as before; update the function ensureRolldownOptions to first
guard/initialize config.build, then perform the existing rolldown/output
assignments and set output.strictExecutionOrder = true.
valentinpalkovic
added
ci:daily
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
scripts/utils/yarn.ts (2)
186-190: Stale comment: YN0060 is now discarded, not treated as error.The comment says "Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY" but the code now discards it.
} else { // Discard all YN0013 - FETCH_NOT_CACHED messages - // Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY + // Discard all YN0060 - INCOMPATIBLE_PEER_DEPENDENCY messages command.push( `yarn config set logFilters --json "[{\\"code\\":\\"YN0013\\",\\"level\\":\\"discard\\"},{\\"code\\":\\"YN0060\\",\\"level\\":\\"discard\\"}]"` ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@scripts/utils/yarn.ts` around lines 186 - 190, The comment above the yarn logFilters configuration is stale: it states "Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY" but the actual call to command.push sets YN0060 to "discard". Update the comment to reflect current behavior (that both YN0013 and YN0060 are discarded) or remove the misleading line; specifically edit the comment immediately preceding the command.push that sets logFilters (the one configuring codes YN0013 and YN0060) so it correctly documents that YN0060 is discarded rather than treated as an error.
127-127: Minor: Missing space afterif.- if(key === 'nextjs-vite/14-ts' || key === 'nextjs/15-ts') { + if (key === 'nextjs-vite/14-ts' || key === 'nextjs/15-ts') {As per coding guidelines: "Format code using Prettier with
yarn prettier --write <file>"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@scripts/utils/yarn.ts` at line 127, The conditional expression "if(key === 'nextjs-vite/14-ts' || key === 'nextjs/15-ts')" is missing a space after "if"; update that conditional to use the standard spacing ("if ( ... )") where it appears (look for usages of the variable "key" in the scripts/utils/yarn.ts module) and then run the formatter (yarn prettier --write) to apply consistent formatting across the file.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@scripts/utils/yarn.ts`:
- Around line 127-141: The Vite7 downgrade for nextjs-vite/14-ts is being
overwritten by the Vite8 override; update the logic that builds
packageJson.resolutions so the Vite8 override only applies when
isViteSandbox(key) is true AND the sandbox is not a Next.js variant (e.g.,
exclude keys containing 'nextjs' or specifically 'nextjs-vite/14-ts'). Modify
the block that sets packageJson.resolutions (and/or the isViteSandbox check) to
conditionally spread { vite: '8.0.0-beta.14' } only when isViteSandbox(key) &&
!key.includes('nextjs') (or a similar explicit exclusion for
'nextjs-vite/14-ts'), leaving the additionalResolutions vite: '^7.3.1' intact
for that key.
---
Nitpick comments:
In `@scripts/utils/yarn.ts`:
- Around line 186-190: The comment above the yarn logFilters configuration is
stale: it states "Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY" but the actual
call to command.push sets YN0060 to "discard". Update the comment to reflect
current behavior (that both YN0013 and YN0060 are discarded) or remove the
misleading line; specifically edit the comment immediately preceding the
command.push that sets logFilters (the one configuring codes YN0013 and YN0060)
so it correctly documents that YN0060 is discarded rather than treated as an
error.
- Line 127: The conditional expression "if(key === 'nextjs-vite/14-ts' || key
=== 'nextjs/15-ts')" is missing a space after "if"; update that conditional to
use the standard spacing ("if ( ... )") where it appears (look for usages of the
variable "key" in the scripts/utils/yarn.ts module) and then run the formatter
(yarn prettier --write) to apply consistent formatting across the file.
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
scripts/utils/yarn.ts (1)
103-103: Minor: missing space before(inifstatements.Per standard formatting conventions (Prettier),
if(should beif (.✨ Proposed formatting fix
- if(isViteSandbox(key)) { + if (isViteSandbox(key)) {- if(key === 'nextjs-vite/14-ts' || key === 'nextjs-vite/15-ts') { + if (key === 'nextjs-vite/14-ts' || key === 'nextjs-vite/15-ts') {As per coding guidelines: Format code using Prettier with
yarn prettier --write <file>.Also applies to: 133-134
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@scripts/utils/yarn.ts` at line 103, The if-statement formatting is missing a space (e.g., `if(isViteSandbox(key))`)—update the conditional expressions that reference isViteSandbox (and any similar `if(...)` usages around the reported spots) to use the standard `if (` spacing and run Prettier to reformat the file (e.g., yarn prettier --write) so all `if` statements conform to the project's formatting rules.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@scripts/utils/yarn.ts`:
- Around line 191-195: Update the inline comment above the yarn config
invocation to accurately describe behavior: change the comment that currently
reads "Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY" to state that YN0060 is
discarded (matching the yarn config JSON applied in the command.push call that
sets logFilters for YN0013 and YN0060). Ensure the comment references the same
log codes YN0013 and YN0060 and reflects that both are being discarded by the
yarn config entry used in the command.push invocation.
- Around line 103-131: The code overwrites additionalResolutions set by
isViteSandbox() when later branching on key, causing sandboxes like
"react-native-web-vite/expo-ts" to lose the Vite 8 resolution; update the
branches that currently assign additionalResolutions (the React 19 list, the
'react-webpack/prerelease-ts' branch, and the 'react-rsbuild/default-ts' branch)
to merge into the existing additionalResolutions instead (e.g., using
Object.assign or spread) so any prior entries from isViteSandbox(key) are
preserved; reference variables/functions: additionalResolutions, isViteSandbox,
key, packageJson to locate the changes.
---
Nitpick comments:
In `@scripts/utils/yarn.ts`:
- Line 103: The if-statement formatting is missing a space (e.g.,
`if(isViteSandbox(key))`)—update the conditional expressions that reference
isViteSandbox (and any similar `if(...)` usages around the reported spots) to
use the standard `if (` spacing and run Prettier to reformat the file (e.g.,
yarn prettier --write) so all `if` statements conform to the project's
formatting rules.
Comment on lines
191
to
195
| // Discard all YN0013 - FETCH_NOT_CACHED messages | ||
| // Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY | ||
| command.push( | ||
| `yarn config set logFilters --json "[{\\"code\\":\\"YN0013\\",\\"level\\":\\"discard\\"},{\\"code\\":\\"YN0060\\",\\"level\\":\\"error\\"}]"` | ||
| `yarn config set logFilters --json "[{\\"code\\":\\"YN0013\\",\\"level\\":\\"discard\\"},{\\"code\\":\\"YN0060\\",\\"level\\":\\"discard\\"}]"` | ||
| ); |
Contributor
There was a problem hiding this comment.
Comment/code mismatch: YN0060 is discarded, not errored.
The comment on line 192 says "Error on YN0060" but the code now discards it. Update the comment to reflect the actual behavior.
📝 Proposed fix
// Discard all YN0013 - FETCH_NOT_CACHED messages
- // Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY
+ // Discard all YN0060 - INCOMPATIBLE_PEER_DEPENDENCY messages
command.push(
`yarn config set logFilters --json "[{\\"code\\":\\"YN0013\\",\\"level\\":\\"discard\\"},{\\"code\\":\\"YN0060\\",\\"level\\":\\"discard\\"}]"`
);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@scripts/utils/yarn.ts` around lines 191 - 195, Update the inline comment
above the yarn config invocation to accurately describe behavior: change the
comment that currently reads "Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY" to
state that YN0060 is discarded (matching the yarn config JSON applied in the
command.push call that sets logFilters for YN0013 and YN0060). Ensure the
comment references the same log codes YN0013 and YN0060 and reflects that both
are being discarded by the yarn config entry used in the command.push
invocation.
Contributor
There was a problem hiding this comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@scripts/utils/yarn.ts`:
- Around line 185-188: Update the misleading comment above the yarn config
command: the code sets both YN0013 and YN0060 to "discard", so change the second
comment line referencing YN0060 (currently "Error on YN0060 -
INCOMPATIBLE_PEER_DEPENDENCY") to indicate it is discarded (e.g., "Discard
YN0060 - INCOMPATIBLE_PEER_DEPENDENCY") so the comments match the command.push
call that configures logFilters.
- Around line 103-125: The React 19 branch is overwriting additionalResolutions
and dropping the vite override set earlier; update the branches that assign
additionalResolutions (the array check for
'nextjs/default-ts','nextjs/prerelease','react-native-web-vite/expo-ts', the
'react-webpack/prerelease-ts' branch, and the 'react-rsbuild/default-ts' branch)
to merge into the existing object instead of replacing it (e.g., use spread:
additionalResolutions = { ...additionalResolutions, react: '...', 'react-dom':
'...' } or pull values from packageJson for react-webpack), so isViteSandbox's
vite: '8.0.0-beta.14' entry is preserved when layering React 19 or other
overrides.
This reverts commit de4c08c.
yannbf
approved these changes
Mar 9, 2026
11 tasks
8 tasks
yannbf
added
the
needs qa
This was referenced Mar 13, 2026
valentinpalkovic
added
the
patch:yes
6 tasks
valentinpalkovic
pushed a commit
that referenced
this pull request
Mar 13, 2026
Vite: Support Vite 8 (cherry picked from commit cb6645a)
6 tasks
github-actions
Bot
added
the
patch:done
8 tasks
yannbf
removed
the
needs qa
8 tasks
8 tasks
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #33789
Closes #33797
What I did
Add compatibility with Vite 8 (Rolldown-powered) across all Vite-based Storybook packages.
Peer dependency range — Extended the
vitepeer dependency from^5.0.0 || ^6.0.0 || ^7.0.0to^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0in:@storybook/builder-vite@storybook/react-vite@storybook/vue3-vite@storybook/svelte-vite@storybook/sveltekit@storybook/nextjs-vite@storybook/react-native-web-vitebuild.rollupOptions→build.rolldownOptionsVite 8 renamed this config key. Added a version-detection utility (
bundlerOptionsKey) that checks the installed Vite major version and uses the correct key. This keeps the builder fully backwards compatible with Vite 5–7.Sandbox overrides
Vite-based sandboxes now resolve
viteto8.0.0-beta.13.Migration guide audit
Audited the full Vite 8 migration guide. Storybook does not use any of the other deprecated/removed features:
esbuildconfig,optimizeDeps.esbuildOptions, ortransformWithEsbuild(now Oxc-based)build.commonjsOptionsorbuild.dynamicImportVarsOptionsresolve.alias[].customResolverormanualChunksshouldTransformCachedModule,resolveImportMeta,renderDynamicImport,resolveFileUrl)Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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-33788-sha-b2327e4a. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-33788-sha-b2327e4a sandboxor in an existing project withnpx storybook@0.0.0-pr-33788-sha-b2327e4a upgrade.More information
0.0.0-pr-33788-sha-b2327e4avalentin/support-vite-8b2327e4a1772118687)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=33788Summary by CodeRabbit
New Features
Chores