Skip to content

NextJs-Vite: Enable next/font loading when using next-vite#31906

Merged
valentinpalkovic merged 2 commits into
storybookjs:nextfrom
k35o:chore/update-vite-plugin-storybook-nextjs
Jul 1, 2025
Merged

NextJs-Vite: Enable next/font loading when using next-vite#31906
valentinpalkovic merged 2 commits into
storybookjs:nextfrom
k35o:chore/update-vite-plugin-storybook-nextjs

Conversation

@k35o
Copy link
Copy Markdown
Contributor

@k35o k35o commented Jun 30, 2025

storybookjs/vite-plugin-storybook-nextjs#44
storybookjs/vite-plugin-storybook-nextjs#43

What I did

In vite-plugin-storybook-nextjs, there was an issue where the plugin would break when handling CSS generated by next/font due to a JSON.parse error.
This bug has been fixed on the vite-plugin-storybook-nextjs side, so this PR incorporates this change.

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

Updates vite-plugin-storybook-nextjs dependency from ^2.0.3 to 2.0.5 to enable next/font support in the nextjs-vite framework, fixing a JSON.parse error when handling CSS generated by next/font.

  • Updates code/frameworks/nextjs-vite/package.json to pin dependency version to 2.0.5 for better stability
  • Missing automated tests to verify next/font functionality
  • Missing manual testing steps in PR description
  • Missing required PR label for categorization
  • No documentation updates included despite adding new functionality

@k35o
Copy link
Copy Markdown
Contributor Author

k35o commented Jun 30, 2025

@valentinpalkovic
Thanks for reviewing the vite-plugin-storybook-nextjs PR! I'd like to incorporate these changes into the nextjs-vite framework. Review would be appreciated

Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

2 files reviewed, no comments
Edit PR Review Bot Settings | Greptile

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Jun 30, 2025

View your CI Pipeline Execution ↗ for commit 195b8ff.

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

☁️ Nx Cloud last updated this comment at 2025-07-01 01:29:40 UTC

@storybook-app-bot
Copy link
Copy Markdown

storybook-app-bot Bot commented Jun 30, 2025

Package Benchmarks

Commit: 195b8ff, ran on 1 July 2025 at 01:16:55 UTC

No significant changes detected, all good. 👏

"@storybook/react-vite": "workspace:*",
"styled-jsx": "5.1.6",
"vite-plugin-storybook-nextjs": "^2.0.3"
"vite-plugin-storybook-nextjs": "2.0.5"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"vite-plugin-storybook-nextjs": "2.0.5"
"vite-plugin-storybook-nextjs": "^2.0.5"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@valentinpalkovic
Thanks for reviewing!

Fixed by 195b8ff

@k35o k35o requested a review from valentinpalkovic July 1, 2025 01:06
@valentinpalkovic valentinpalkovic changed the title Enable next/font loading when using next-vite NextJs-Vite: Enable next/font loading when using next-vite Jul 1, 2025
@valentinpalkovic valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jul 1, 2025
@valentinpalkovic valentinpalkovic merged commit 6214187 into storybookjs:next Jul 1, 2025
50 of 57 checks passed
@jeremytenjo
Copy link
Copy Markdown

jeremytenjo commented Jul 1, 2025

Hey @k35o, do you know if these changes will fix this error?

5:30:54 PM [vite] Internal server error: "undefined" is not valid JSON
  Plugin: vite:import-analysis
  File: /fonts.ts

#31866

@k35o
Copy link
Copy Markdown
Contributor Author

k35o commented Jul 1, 2025

Hi @jeremytenjo
Yes, this pr may fix it.

This change has not yet been incorporated in the current latest version.
https://github.com/storybookjs/storybook/blob/d6367d8de46f2ce6d3678a86ee2e888fc7fa88e4/code/frameworks/nextjs-vite/package.json

It appears that it will be incorporated in the next version 9.0.16, so it should be fixed if you wait a little longer.
#31913

@jeremytenjo
Copy link
Copy Markdown

Awesome, Thank you! @k35o

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug ci:normal nextjs patch:done Patch/release PRs already cherry-picked to main/release branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants