CLI: Fix Next.js Vite automigration corrupting configs already using @storybook/nextjs-vite

[nathanjessen]

What does this PR do?

Fixes a bug in the nextjs-to-nextjs-vite automigration where the regex /@storybook\/nextjs/g matches as a substring inside @storybook/nextjs-vite, rewriting it to @storybook/nextjs-vite-vite.

How to reproduce

Projects that had both @storybook/nextjs and @storybook/nextjs-vite installed simultaneously in SB9 (valid — some projects installed both transitionally) would already have @storybook/nextjs-vite as the framework name in main.ts. Running storybook@10 upgrade on such a project corrupts the config:

- framework: { name: '@storybook/nextjs-vite' }
+ framework: { name: '@storybook/nextjs-vite-vite' }   ← broken, package doesn't exist

Fix

Add a negative lookahead to the regex so only bare @storybook/nextjs (not already @storybook/nextjs-vite) is replaced:

- content.replace(/@storybook\/nextjs/g, '@storybook/nextjs-vite')
+ content.replace(/@storybook\/nextjs(?!-vite)/g, '@storybook/nextjs-vite')

A regression test is included that verifies a config already using @storybook/nextjs-vite is left untouched by the migration.

Checklist

• The fix is covered by a unit test
• No existing tests broken
• Targets next branch

This is a bugfix that affects users running storybook@10 upgrade from SB9. It would be great if it could be patched into the next stable release.

Summary by CodeRabbit

• Bug Fixes

  • Migration now only updates non-migrated Next.js references, preventing accidental re-modification or corruption of configurations that already use the Next.js Vite framework.

• Tests

  • Added a regression test ensuring the migration tool leaves already-correct configuration files unchanged and performs no unnecessary writes.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 22532d54-5d21-4980-b09a-547b67354b56

📥 Commits

Reviewing files that changed from the base of the PR and between f5567b4 and 382d78b.

📒 Files selected for processing (1)

• code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.ts

---

📝 Walkthrough

Walkthrough

Tightened the Next.js→Next.js-Vite migration regex to avoid touching already-migrated @storybook/nextjs-vite strings and added a regression test ensuring no write occurs when main.ts already references @storybook/nextjs-vite.

Changes

Cohort / File(s)	Summary
Next.js→Next.js-Vite fixer code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.ts	Replaced global /@storybook\/nextjs/g replacement with /@storybook\/nextjs(?!-vite)/g to skip already-migrated -vite occurrences.
Regression test code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts	Added a run-mode test that stubs readFile to return a main.ts already using @storybook/nextjs-vite, mocks getDependencyVersion, and asserts no writeFile is invoked.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• CLI: Fix Next.js Vite automigration corrupting configs already using @storybook/nextjs-vite #34249 — Makes the same regex change and adds the same regression test to avoid rewriting configs already using @storybook/nextjs-vite.
• Nextjs-Vite: Install vite during migration if not installed yet #33316 — Related automigration changes for Next.js→Vite; adds VITE_DEFAULT_VERSION and tests around installing Vite when missing.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts`:
- Line 250: Move the inline mock setup
vi.mocked(mockPackageManager.getDependencyVersion).mockReturnValue('7.0.0') into
a beforeEach so all tests that require Vite installed share the same setup;
create a nested describe block (e.g., "when vite is installed") around those
tests and add a beforeEach that calls
vi.mocked(mockPackageManager.getDependencyVersion).mockReturnValue('7.0.0'), and
remove the inline mock from individual tests to keep mocking consistent and DRY.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 28520e9a-3086-4bc3-a854-4f5f5f11ec05

📥 Commits

Reviewing files that changed from the base of the PR and between 87733f1 and 05daa6f.

📒 Files selected for processing (2)

• code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts
• code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

wc -l code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts

Repository: storybookjs/storybook

Length of output: 143

---

🏁 Script executed:

sed -n '230,270p' code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts

Repository: storybookjs/storybook

Length of output: 1427

---

🏁 Script executed:

head -100 code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts

Repository: storybookjs/storybook

Length of output: 3064

---

🏁 Script executed:

sed -n '100,180p' code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts

Repository: storybookjs/storybook

Length of output: 2559

---

🏁 Script executed:

sed -n '180,250p' code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts

Repository: storybookjs/storybook

Length of output: 2652

---

Move mock setup into a beforeEach block for consistency.

Line 250 defines mock behavior inline inside the test. This violates the test mocking convention that mock behaviors should be set up in beforeEach blocks. Consider creating a nested describe + beforeEach block for tests that require vite to be installed, since multiple tests in this suite need getDependencyVersion to return a non-null version.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.test.ts`
at line 250, Move the inline mock setup
vi.mocked(mockPackageManager.getDependencyVersion).mockReturnValue('7.0.0') into
a beforeEach so all tests that require Vite installed share the same setup;
create a nested describe block (e.g., "when vite is installed") around those
tests and add a beforeEach that calls
vi.mocked(mockPackageManager.getDependencyVersion).mockReturnValue('7.0.0'), and
remove the inline mock from individual tests to keep mocking consistent and DRY.

[nathanjessen]

Regarding the CodeRabbit suggestion to move the inline mock into a beforeEach: that refactor is worthwhile but touches existing tests outside this PR's scope. The inline getDependencyVersion mock pattern matches lines 178 and 211 in the same file, so the new regression test is consistent with the surrounding code. Happy to do a test cleanup follow-up separately.

[JReinhold]

Great! ❤️