Fix: Update no-renderer-packages rule to reference stable @storybook/nextjs-vite

[Copilot]

The no-renderer-packages ESLint rule referenced @storybook/experimental-nextjs-vite, which has graduated to stable as @storybook/nextjs-vite.

Changes

• Rule implementation: Updated rendererToFrameworks mapping in no-renderer-packages.ts
• Tests: Updated expected suggestions string in no-renderer-packages.test.ts
• Documentation: Updated package name in rule documentation

Impact

Users importing from @storybook/react now receive the correct error message:

Do not import renderer package "@storybook/react" directly. 
Use a framework package instead (e.g. @storybook/nextjs, 
@storybook/react-vite, @storybook/react-webpack5, 
@storybook/react-native-web-vite, @storybook/nextjs-vite).

Previously suggested the non-existent @storybook/experimental-nextjs-vite.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: eslint-plugin-storybook no-renderer-packages references @storybook/experimental-nextjs-vite</issue_title>
<issue_description>### Describe the bug

The rule no-renderer-packages still references experimental-nextjs-vite, while it's stable now:
Do not import renderer package "@storybook/react" directly. Use a framework package instead (e.g. @storybook/nextjs, @storybook/react-vite, @storybook/react-webpack5, @storybook/react-native-web-vite, @storybook/experimental-nextjs-vite).eslint[storybook/no-renderer-packages](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/docs/rules/no-renderer-packages.md)

Reproduction link

https://stackblitz.com/edit/github-ebvuvuxa?file=src%2Fstories%2FButton.stories.ts

Reproduction steps

1. Go to above repro link
2. run npx eslint .
3. See error about Button.stories.ts file

System

Storybook Environment Info:

  System:
    OS: macOS 15.6
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.21.0 - ~/.nvm/versions/node/v22.21.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.9.4 - ~/.nvm/versions/node/v22.21.0/bin/npm <----- active
  npmPackages:
    @storybook/addon-a11y: ^10.0.0 => 10.0.0
    @storybook/addon-docs: ^10.0.0 => 10.0.0
    @storybook/addon-onboarding: ^10.0.0 => 10.0.0
    @storybook/addon-themes: ^10.0.0 => 10.0.0
    @storybook/addon-vitest: ^10.0.0 => 10.0.0
    @storybook/nextjs-vite: ^10.0.0 => 10.0.0
    chromatic: ^13.3.2 => 13.3.2
    eslint-plugin-storybook: ^10.0.0 => 10.0.0
    msw-storybook-addon: ^2.0.6 => 2.0.6
    storybook: ^10.0.0 => 10.0.0
    storybook-next-intl: ^2.0.13 => 2.0.13

Additional context

No response</issue_description>

<agent_instructions>Find where the no-renderer-packages rule is defined. Fix the reference to "@storybook/experimental-nextjs-vite" to have it reference "@storybook/nextjs-vite" instead.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug]: eslint-plugin-storybook no-renderer-packages references @storybook/experimental-nextjs-vite #32892

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Summary by CodeRabbit

• Chores
  • Updated ESLint plugin to recommend the stable version of the Next.js Vite renderer package instead of the experimental version for Storybook React configurations.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit add8d70

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

---

☁️ Nx Cloud last updated this comment at 2025-10-30 12:17:33 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

The eslint-plugin's no-renderer-packages rule updates replace the experimental @storybook/experimental-nextjs-vite package with the stable @storybook/nextjs-vite package in the React renderer's suggested framework packages. Changes span the rule source, tests, and documentation.

Changes

Cohort / Cohort / File(s)	Summary
ESLint no-renderer-packages rule updates code/lib/eslint-plugin/src/rules/no-renderer-packages.ts, code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts, code/lib/eslint-plugin/docs/rules/no-renderer-packages.md	Replaced @storybook/experimental-nextjs-vite with @storybook/nextjs-vite in the @storybook/react renderer's framework suggestions within the rendererToFrameworks mapping, corresponding test case, and documentation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify consistent replacement of experimental package reference across all three files
• Confirm test expectations align with source code changes
• Ensure documentation reflects the updated package suggestion

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b3d0932 and add8d70.

📒 Files selected for processing (3)

• code/lib/eslint-plugin/docs/rules/no-renderer-packages.md (1 hunks)
• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts (1 hunks)
• code/lib/eslint-plugin/src/rules/no-renderer-packages.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.ts
• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.ts
• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.ts
• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.ts
• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

**/*.@(test|spec).{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests using vi.mock() (e.g., filesystem, loggers)

Files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

🧠 Learnings (8)

📓 Common learnings

Learnt from: cylewaitforit
PR: storybookjs/storybook#31965
File: code/lib/eslint-plugin/src/rules/only-csf3.ts:31-33
Timestamp: 2025-09-24T13:04:58.631Z
Learning: The Storybook ESLint plugin supports ESLint v8.57+ where context.sourceCode is already available as a property since it was introduced in v8.40.0, so no fallback to context.getSourceCode() is needed in rules.

Learnt from: cylewaitforit
PR: storybookjs/storybook#31965
File: code/lib/eslint-plugin/src/rules/only-csf3.ts:31-33
Timestamp: 2025-09-24T13:04:58.631Z
Learning: The Storybook ESLint plugin supports ESLint v8.57+ where context.sourceCode is already available as a property since it was introduced in v8.40.0, so no fallback to context.getSourceCode() is needed in rules.

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

Applied to files:

• code/lib/eslint-plugin/docs/rules/no-renderer-packages.md
• code/lib/eslint-plugin/src/rules/no-renderer-packages.ts

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`

Applied to files:

• code/lib/eslint-plugin/docs/rules/no-renderer-packages.md

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there

Applied to files:

• code/lib/eslint-plugin/docs/rules/no-renderer-packages.md

📚 Learning: 2025-10-02T09:22:13.215Z

Learnt from: JReinhold
PR: storybookjs/storybook#32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.

Applied to files:

• code/lib/eslint-plugin/docs/rules/no-renderer-packages.md

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies

Applied to files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

📚 Learning: 2025-09-17T08:11:47.196Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases

Applied to files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

📚 Learning: 2025-10-01T15:24:01.060Z

Learnt from: Sidnioulz
PR: storybookjs/storybook#32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

• code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts

🔇 Additional comments (3)

code/lib/eslint-plugin/docs/rules/no-renderer-packages.md (1)

17-17: LGTM! Documentation updated correctly.

The suggestion list now correctly references the stable @storybook/nextjs-vite package, consistent with the implementation changes.

code/lib/eslint-plugin/src/rules/no-renderer-packages.test.ts (1)

68-68: LGTM! Test expectations updated correctly.

The suggestions string correctly matches the updated rendererToFrameworks mapping for @storybook/react in the implementation file.

code/lib/eslint-plugin/src/rules/no-renderer-packages.ts (1)

22-28: Verification complete—all references are intentional.

The remaining references to @storybook/experimental-nextjs-vite are legitimate: migration documentation in MIGRATION.md and CHANGELOGs, an automigration helper in consolidated-packages.ts that maps the old package to the new one, and tests for that migration logic. No problematic references exist in active source code or configurations. The code change correctly adds the stable @storybook/nextjs-vite package to the ESLint rule.

---

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