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

[kasperpeulen]

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/[email protected]_@[email protected][email protected][email protected][email protected]/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/[email protected]_@[email protected][email protected][email protected][email protected]/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/[email protected]_@[email protected][email protected][email protected][email protected]/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/[email protected]_@[email protected][email protected][email protected][email protected]/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/[email protected]_@[email protected][email protected][email protected][email protected]/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]

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)

vite-plugin-react/packages/plugin-rsc/src/plugin.ts

Lines 380 to 386 in 5e245aa

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