Documentation: Add FAQ about Nextjs plugin in portable stories

[cabbiepete]

Closes #

What I did

Added docs for testing where you are reusing stories in vitest and using the nextjs-vite framework.

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 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>

Greptile Summary

Added documentation for testing stories with Vitest in Next.js Vite environments, specifically addressing module resolution issues.

• Added new docs/_snippets/vite-includeStorybookNextjsPlugin.md showing configuration for Storybook Next.js Vite plugin
• Updated docs/writing-tests/integrations/stories-in-unit-tests.mdx with troubleshooting section for 'sb-original/image-context' error
• Added solution for resolving Next.js + Vite testing configuration within React-specific documentation section
• Maintains document structure by placing new content in appropriate conditional renderer block

Summary by CodeRabbit

• Documentation
  • Added a configuration snippet showing how to enable the Storybook Next.js plugin for Vite, and when it is automatically loaded versus when to add it manually.
  • Added a troubleshooting subsection for React addressing “Next.js Vite cannot find module” errors by including the Storybook Next.js plugin.
  • Linked the troubleshooting guidance to the new configuration snippet for easy copy-paste setup.

[greptile-apps]

_{2 files reviewed, 2 comments
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Heading uses different case style than other troubleshooting sections. Change 'Nextjs vite' to 'Next.js Vite' to match documentation style.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit fbc89a6

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

---

☁️ Nx Cloud last updated this comment at 2025-10-14 17:23:38 UTC

[yannbf]

Thanks for your contribution!

[jonniebigodes]

@cabbiepete, thanks for putting together this pull request and helping us improve the documentation by adding these useful caveats. We appreciate it 🙏 !

I've left a small item for you to look into when you can. Let me know once you've addressed it and the feedback from Greptile so that we can merge this into the documentation.

Hope you have a fantastic day.

Stay safe

[jonniebigodes]

@cabbiepete, I was wondering if you have the time to address the feedback, so that we can get this pull request merged in and published in our documentation. Let me know and we'll go from there.

Have a great week

Stay safe

[jonniebigodes]

@cabbiepete just a reminder to see if you have the time to address the feedback, so that we can get this in.

Let me know and we'll go from there.

Have a great day.

Stay safe

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Adds a new Vite configuration snippet for manually including the Storybook Next.js plugin and updates React testing docs with troubleshooting guidance for a module resolution error and a reference to the new snippet.

Changes

Cohort / File(s)	Summary
Docs: Vite Storybook Next.js plugin snippet docs/_snippets/vite-includeStorybookNextjsPlugin.md	Introduces a snippet showing how to add storybookNextJsPlugin to Vite’s plugins in vitest.config.ts, noting it’s auto-loaded with @storybook/addon-vitest and otherwise must be added manually.
Docs: React renderer troubleshooting docs/writing-tests/integrations/stories-in-unit-tests.mdx	Adds a React-specific subsection advising to include storybookNextJsPlugin when encountering “Cannot find module 'sb-original/image-context'”, referencing the new snippet.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 4894b51 and fbc89a6.

📒 Files selected for processing (2)

• docs/_snippets/vite-includeStorybookNextjsPlugin.md (1 hunks)
• docs/writing-tests/integrations/stories-in-unit-tests.mdx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

docs/**

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

Update documentation under docs/ for significant changes, including migration guides for breaking changes

Files:

• docs/writing-tests/integrations/stories-in-unit-tests.mdx
• docs/_snippets/vite-includeStorybookNextjsPlugin.md

🪛 LanguageTool

docs/_snippets/vite-includeStorybookNextjsPlugin.md

[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: ts filename="vitest.config.ts" renderer="react" language="ts" import { defineConfig } from "vite"; import { storybookNextJsPlugin } from '@storybook/nextjs-vite/vite-plugin' export default defineConfig({ // only necessary when not using @storybook/addon-vitest, otherwise the plugin is loaded automatically plugins: [storybookNextJsPlugin()], });

(QB_NEW_DE)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Danger JS
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (1)

docs/_snippets/vite-includeStorybookNextjsPlugin.md (1)

1-9: Snippet fence and content LGTM; please verify plugin path and auto‑loading note.

Looks correct and ready to include. Please double-check:

• The import path and named export: '@storybook/nextjs-vite/vite-plugin' → storybookNextJsPlugin.
• The claim that @storybook/addon-vitest auto-loads this plugin in Vitest runs for Next.js + Vite.

---

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