Registry /
web-framework / react-server-dom-webpack
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
createFromFetch
✓ import { createFromFetch } from 'react-server-dom-webpack/client';
✗ const createFromFetch = require('react-server-dom-webpack/client');
Used by meta-frameworks on the client to consume RSC payloads from a fetch response. Not for direct application developer use.
decodeAction
✓ import { decodeAction } from 'react-server-dom-webpack/client';
✗ const decodeAction = require('react-server-dom-webpack/client');
Part of the client-side runtime for decoding Server Action arguments when a Server Action is invoked. Intended for framework integration.
encodeReply
✓ import { encodeReply } from 'react-server-dom-webpack/client';
✗ const encodeReply = require('react-server-dom-webpack/client');
Used by meta-frameworks to encode the response payload from client-side data sent to a Server Action.
Demonstrates a conceptual usage of `createFromFetch` within a simplified meta-framework client-side runtime to hydrate React Server Components from a server payload. This package is not intended for direct application developer use.
// This code is a highly simplified conceptual example of how a meta-framework
// might internally use react-server-dom-webpack on the client side.
// Application developers should NOT import this package directly.
import { createFromFetch } from 'react-server-dom-webpack/client';
import { hydrateRoot } from 'react-dom/client';
async function renderServerComponentRoot(rootElementId: string, serverComponentUrl: string) {
const rootElement = document.getElementById(rootElementId);
if (!rootElement) {
console.error(`Root element with ID "${rootElementId}" not found.`);
return;
}
try {
// Simulate fetching the Server Component payload from a server endpoint.
// In a real meta-framework, this would be handled by a sophisticated router.
const response = await fetch(serverComponentUrl, {
headers: {
Accept: 'text/x-component', // Standard header for RSC payloads
},
});
if (!response.ok) {
throw new Error(`Failed to fetch Server Component: ${response.statusText}`);
}
// createFromFetch reads the RSC payload from the response body.
// It returns a React element that represents the Server Component tree.
const serverComponent = createFromFetch(response, {
// client-reference map (Webpack bundle map) would be provided here
// by the meta-framework to resolve client components
async callServer(id, args) {
// This function is called when a Server Action is invoked from the client.
// It's part of the RSC client runtime, facilitating communication back to the server.
const body = JSON.stringify({ id, args });
const res = await fetch('/_server_action', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body,
});
return res.json();
},
});
// Hydrate the existing HTML generated by the server with the React Server Component tree.
// This connects client-side interactivity to the server-rendered content.
hydrateRoot(rootElement, serverComponent);
console.log('React Server Components hydrated successfully.');
} catch (error) {
console.error('Error hydrating React Server Components:', error);
}
}
// Example usage within a simulated meta-framework client entry point
document.addEventListener('DOMContentLoaded', () => {
renderServerComponentRoot('root', '/rsc-payload'); // Imagine '/rsc-payload' serves your RSC data
});
// A placeholder for a basic HTML file (index.html) that this might hydrate:
// <div id="root"><!-- Server-rendered content will go here, or be replaced/hydrated --></div>
// Note: This example is illustrative. A real setup is far more complex.
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'react-server-dom-webpack/client' in 'your-project-path'
Attempting to import `react-server-dom-webpack/client` directly into an application without a meta-framework managing the RSC build process.
fixThis package is for framework integration, not direct application use. If you are building a React application, rely on a meta-framework like Next.js that orchestrates React Server Components.
TypeError: Cannot read properties of undefined (reading 'callServer') in createFromFetch options
Using `createFromFetch` without providing a `callServer` function in the options object, which is necessary for handling Server Actions.
fixEnsure the `callServer` function is correctly implemented and passed to `createFromFetch` if your application uses Server Actions. This is typically handled by the integrating meta-framework.
Audit
Dependencies
reactrequiredCore React library for component definition and rendering.
react-domrequiredClient-side DOM rendering utilities for React, specifically for hydrating server-rendered content.
webpackrequiredBundler required for resolving client component references and handling module graphs in RSC environments.