Registry / devops / vite-plugin-react-server

vite-plugin-react-server

library2.0.1jsnpmunverified

Vite plugin for React Server Components (RSC) that transforms React components into native ESM modules, enabling static site generation, dynamic servers, and portable RSC payloads compatible with any HTTP server. Version 2.0.1 requires React 19.2+ and Node ^23.7.0, bundles the react-server-dom-esm transport via react-server-loader, and ships TypeScript types. Key differentiators: no experimental React builds needed, automatic client module detection via filename pattern or "use client" directive, built-in support for third-party client packages via peerDep detection, and a Storybook preset. Released under MIT, with active development on GitHub.

devops

npm install vite-plugin-react-server

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REACT-

vite-plugin-react-server

devopsjavascriptv2.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginReactServer

✓ import { vitePluginReactServer } from 'vite-plugin-react-server'

✗ import vitePluginReactServer from 'vite-plugin-react-server'

Named export, not default. ESM only; no CJS support. TypeScript types included.

defineConfig

✓ import { defineConfig } from 'vite'

✗ const { defineConfig } = require('vite')

Vite's config helper; always use ESM import. CJS require does not work in Vite config context.

use client directive

✓ // in Counter.tsx: "use client";

✗ // placing after imports or code

Must be top-of-file before any imports; leading whitespace, comments, and 'use strict' allowed above. Substring matches like 'clientUtils.tsx' are not treated as client modules.

Minimal Vite config with a single server component page, plus dev and build commands.

// vite.config.ts import { defineConfig } from 'vite'; import { vitePluginReactServer } from 'vite-plugin-react-server'; export default defineConfig({ plugins: vitePluginReactServer({ moduleBase: 'src', Page: 'src/page.tsx', build: { pages: ['/'] }, }), }); // src/page.tsx export const Page = ({ url }: { url: string }) => <div>Hello from {url}</div>; // Run dev server: npx vite // Build static site: NODE_OPTIONS='--conditions react-server' vite build --app // Output: dist/static/ (HTML + RSC), dist/client/, dist/server/

Debug

Known issues

breakingvite-plugin-react-server 2.0 requires React 19.2+ and Node ^23.7.0. Versions 1.x are incompatible.

fix

Upgrade React to 19.2.7 or later and Node to 23.7.0 or later.

affects: >=1.0.0 <2.0.0

breakingThe react-server-dom-esm transport is now bundled inside react-server-loader (auto-installed). You no longer install a transport package or an experimental React build.

fix

Remove any manual react-server-dom-esm or experimental React dependencies; ensure react-server-loader is in node_modules.

affects: >=1.0.0 <2.0.0

deprecatedImporting from 'vite-plugin-react-server/experimental' is deprecated and will be removed in v3.

fix

Migrate imports to the main package entry 'vite-plugin-react-server'.

affects: >=2.0.0 <3.0.0

gotchaThird-party client packages like Chakra UI, MUI, Mantine cannot be imported directly into server components; they require a 'use client' wrapper.

fix

Wrap the library's provider in a component that starts with 'use client' (e.g., 'ClientProvider.tsx').

affects: *

gotchaFilename pattern for auto-detecting client modules: regex (^|[\/.])client\.[cm]?[jt]sx?$. Files like clientUtils.tsx or clients.tsx are NOT detected.

fix

Rename files to Button.client.tsx, App.client.tsx, or add "use client"; directive at top.

affects: *

gotchaStorybook preset requires additional config in .storybook/main.ts; see docs for details.

fix

Ensure ./.storybook/main.ts imports the preset and adds vitePluginReactServer plugin.

affects: *

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported.

Using CommonJS require() to import vite-plugin-react-server (ESM-only).

fix

Use ESM import syntax: import { vitePluginReactServer } from 'vite-plugin-react-server'.

Error: Cannot find module 'react-server-loader'

Missing dependency react-server-loader which bundles the transport. Should be auto-installed but may be missing with older npm versions or lockfile issues.

fix

Install explicitly: npm install -D react-server-loader.

Error: 'Page' is not exported from 'src/page.tsx'.

ModuleBase or Page path mismatch in vite config.

fix

Verify moduleBase resolves correctly and Page export name matches the filename's named export.

Error: React.createElement: type is invalid -- expected a string or a class/function but got: object.

Importing a client-only library directly in a server component without 'use client' boundary.

fix

Wrap the library component in a 'use client' file and re-export.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Server Components runtime

react-domrequiredPeer dependency for DOM rendering and SSR

viterequiredPeer dependency required as the plugin host

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nicobrinkkemper/vite-plugin-react-server ↗

packagevite-plugin-react-server ↗

homepagehttps://github.com/nicobrinkkemper/vite-plugin-react-server#readme ↗