Nextjs Vite: Update internal plugin to support svgr use cases
#32957
Conversation
yannbf
added
bug
patch:yes
ndelangen
changed the title
svgr use cases
📝 WalkthroughWalkthroughThe PR updates the vite-plugin-storybook-nextjs dependency from ^3.0.1 to ^3.1.0 and refactors the plugin configuration to pass an options object containing image and directory configuration, replacing the previous single parameter approach. Type definitions are expanded to include optional image configuration properties. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
✨ Finishing touches
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/frameworks/nextjs-vite/src/types.ts (1)
14-17: LGTM! Type definition is clean and backward compatible.The optional
imageconfiguration withincludeFilesandexcludeFilesarrays provides a clear interface for SVGR file filtering. Consider adding JSDoc comments to help users understand when and how to use this option.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (3)
code/frameworks/nextjs-vite/package.json(1 hunks)code/frameworks/nextjs-vite/src/preset.ts(2 hunks)code/frameworks/nextjs-vite/src/types.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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 (useyarn lint:js:cmd <file>)
Files:
code/frameworks/nextjs-vite/src/types.tscode/frameworks/nextjs-vite/package.jsoncode/frameworks/nextjs-vite/src/preset.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/frameworks/nextjs-vite/src/types.tscode/frameworks/nextjs-vite/src/preset.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/frameworks/nextjs-vite/src/types.tscode/frameworks/nextjs-vite/src/preset.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/frameworks/nextjs-vite/src/types.tscode/frameworks/nextjs-vite/src/preset.ts
🧠 Learnings (6)
📓 Common learnings
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 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.
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 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/frameworks/nextjs-vite/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 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/frameworks/nextjs-vite/package.jsoncode/frameworks/nextjs-vite/src/preset.ts
📚 Learning: 2025-11-05T09:38:47.694Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/frameworks/nextjs-vite/package.json
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/frameworks/nextjs-vite/package.json
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/frameworks/nextjs-vite/package.json
🔇 Additional comments (3)
code/frameworks/nextjs-vite/src/preset.ts (2)
71-72: LGTM! Backward compatible extraction of options.The destructuring with default empty object for
imageensures backward compatibility while enabling the new SVGR configuration feature.
76-79: LGTM! Clean refactor to options object pattern.The change from a single parameter to an options object improves extensibility and makes the plugin configuration more maintainable. The implementation correctly passes both
imageanddirconfiguration to the plugin.Also applies to: 92-92
code/frameworks/nextjs-vite/package.json (1)
86-86: Dependency version verified—no issues found.Version
^3.1.0ofvite-plugin-storybook-nextjsexists on npm and has no known security vulnerabilities. The minor version bump is safe to use.
|
View your CI Pipeline Execution ↗ for commit 6ec50cf
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit 6ec50cf
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 124 | 0 |
| Self size | 3.83 MB | 3.83 MB | 🚨 +250 B 🚨 |
| Dependency size | 21.78 MB | 21.89 MB | 🚨 +115 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
Nextjs Vite: Update internal plugin to support `svgr` use cases (cherry picked from commit 7f51296)
github-actions
bot
added
the
patch:done
Closes #
What I did
Followup of work done storybookjs/vite-plugin-storybook-nextjs#69 to support usage of svgr alongside the Nextjs framework
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Dependencies