Next.js: Enhance Vite configuration with styled-jsx aliasing

[valentinpalkovic]

Closes #31549

What I did

Problem

When initializing Storybook in a Next.js v15 project using pnpm, the Storybook UI gets stuck on the loading screen with the following error in the browser console:

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/styled-jsx/index.js?v=1422bc3a' does not provide an export named 'StyleRegistry'

Root Cause: pnpm's Non-Hoisted Dependencies

This is specifically a pnpm issue due to how pnpm handles dependency resolution differently from npm/yarn:

• pnpm doesn't hoist dependencies - Unlike npm/yarn which hoist dependencies to the root node_modules, pnpm maintains strict dependency isolation
• styled-jsx is a direct dependency of @storybook/nextjs-vite - In pnpm, it gets installed in a nested path like /node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/styled-jsx/.
  Vite can't resolve the nested dependency - Vite's module resolution expects to find styled-jsx in a more accessible location, but pnpm's strict isolation prevents this. Additionally, Vite has issues to optimize dependencies for transitive dependencies of packages. If styled-jsx is listed in optimizeDeps.include, Vite will not optimize it in pnpm projects if it is a transitive dependency. We have to tell Vite explicitly about the transitive dependency structure.
• Works fine with npm/yarn - With hoisted dependencies, styled-jsx would be available at the root level where Vite can easily find it

Solution

This fix addresses the pnpm-specific module resolution issue by:

1. Adding explicit styled-jsx aliases to help Vite resolve the pnpm-nested dependency:

• Maps styled-jsx to its actual package location using require.resolve()
• Explicitly resolves styled-jsx/style and styled-jsx/style.js to their correct entry points

2. Including styled-jsx in Vite's optimization dependencies:

• Ensures styled-jsx modules are pre-bundled and optimized by Vite
• Uses the @storybook/nextjs-vite > styled-jsx syntax to reference the nested dependency correctly

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 pull request has been released as version 0.0.0-pr-31757-sha-dd96f9f4. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-31757-sha-dd96f9f4
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/nextjs-alias-styled-jsx
Commit	dd96f9f4
Datetime	Wed Jun 11 21:18:52 UTC 2025 (1749676732)
Workflow run	15595921406

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=31757

Greptile Summary

Enhanced Next.js Vite configuration in Storybook to properly handle styled-jsx module aliasing and optimization, fixing loading issues with Next.js v15.3.2.

• Added resolution aliases for styled-jsx and its style submodules in preset configuration
• Included styled-jsx in optimizeDeps configuration for better dependency handling
• Fixed module export errors that were causing Storybook to hang during loading
• Consolidated path imports using node:path for better maintainability
• Implemented more reliable path resolution using the resolve utility

[greptile-apps]

LGTM

_{1 file reviewed, no comments
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 1a52c00.

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

---

☁️ Nx Cloud last updated this comment at 2025-06-12 05:52:48 UTC