Skip to content

Reproduction of using node_modules server components with client component inside of it#906

Draft
kasperpeulen wants to merge 1 commit intovitejs:mainfrom
kasperpeulen:kasper/repro-use-client-in-node-modules
Draft

Reproduction of using node_modules server components with client component inside of it#906
kasperpeulen wants to merge 1 commit intovitejs:mainfrom
kasperpeulen:kasper/repro-use-client-in-node-modules

Conversation

@kasperpeulen
Copy link

@kasperpeulen kasperpeulen commented Oct 7, 2025

We export the following component in storybook:

import { NextRouter } from '@storybook/nextjs-vite-rsc/rsc/client'

Which can be used inside of server components of the user.
But somehow, if it is used in server components inside of node_modules it breaks.

For example, this is the content of @storybook/nextjs-vite-rsc/repro

import React from 'react';

import { NextRouter } from '@storybook/nextjs-vite-rsc/rsc/client';

export const ServerComponent = ({ children }) => (
  <NextRouter>{children}</NextRouter>
);

This breaks, and I get error messages that the NextRouter is being loaded on the server:

chunk-3RVVKXLG.js?v=734aac02:52 Uncaught TypeError: _react.default.createContext is not a function
    at ../../../../node_modules/.pnpm/next@15.5.4_@playwright+test@1.55.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/shared/lib/app-router-context.shared-runtime.js (chunk-3RVVKXLG.js?v=734aac02:52:43)
    at __require (chunk-5WRI5ZAA.js?v=734aac02:8:50)
    at ../../../../node_modules/.pnpm/next@15.5.4_@playwright+test@1.55.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/client/components/app-router.js (chunk-CEJIVGUO.js?v=734aac02:29789:42)
    at __require (chunk-5WRI5ZAA.js?v=734aac02:8:50)
    at ../../../../node_modules/.pnpm/next@15.5.4_@playwright+test@1.55.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/client/components/router-reducer/reducers/navigate-reducer.js (chunk-CEJIVGUO.js?v=734aac02:30503:22)
    at __require (chunk-5WRI5ZAA.js?v=734aac02:8:50)
    at ../../../../node_modules/.pnpm/next@15.5.4_@playwright+test@1.55.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/client/components/router-reducer/router-reducer.js (chunk-CEJIVGUO.js?v=734aac02:31556:28)
    at __require (chunk-5WRI5ZAA.js?v=734aac02:8:50)
    at ../../../../node_modules/.pnpm/next@15.5.4_@playwright+test@1.55.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/next/dist/client/components/app-router-instance.js (chunk-CEJIVGUO.js?v=734aac02:31638:26)
    at __require (chunk-5WRI5ZAA.js?v=734aac02:8:50)

@hi-ogawa
Copy link
Contributor

hi-ogawa commented Oct 7, 2025

This is likely because client environment tries to optimize (pre-bundle) package, but "use client" is not supported there. "Vite framework package" (not specifically rsc) is expected to be like optimizeDeps.exclude: ['@storybook/nextjs-vite-rsc'], for example, we also exclude @vitejs/plugin-rsc (here PKG_NAME)

optimizeDeps: {
include: [
'react-dom/client',
`${REACT_SERVER_DOM_NAME}/client.browser`,
],
exclude: [PKG_NAME],
},

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants