React Server Components (DOM/Webpack Bindings)

Common errors

• Module not found: Error: Can't resolve 'react-server-dom-webpack/client' in 'your-project-path'

  cause Attempting to import `react-server-dom-webpack/client` directly into an application without a meta-framework managing the RSC build process.
  fix This 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

  cause Using `createFromFetch` without providing a `callServer` function in the options object, which is necessary for handling Server Actions.
  fix Ensure 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.

Warnings

• gotcha This package is explicitly not intended for direct import or use by application developers. It is a low-level binding meant for integration into meta-frameworks (e.g., Next.js, Remix) that handle React Server Components.
  Fix: Use a meta-framework that supports React Server Components rather than attempting to integrate this package manually.
• breaking Recent versions (>=19.0.3) include significant security hardening, DoS mitigations for Server Actions, and cycle protections for React Server Functions. While not directly breaking for end-users, meta-frameworks might need to ensure their integration respects these new protections.
  Fix: Ensure your meta-framework is updated to a version compatible with React 19.x and these security patches.
• gotcha Requires specific Webpack configuration to function correctly within a React Server Components setup, including resolving client component references and handling module boundaries.
  Fix: Consult the documentation of your chosen meta-framework for proper setup and configuration related to React Server Components and Webpack.

Install

• npm install react-server-dom-webpack npm
• yarn add react-server-dom-webpack yarn
• pnpm add react-server-dom-webpack pnpm

Imports

• createFromFetch
  wrong:

  const createFromFetch = require('react-server-dom-webpack/client');

  correct:

  import { createFromFetch } from '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
  wrong:

  const decodeAction = require('react-server-dom-webpack/client');

  correct:

  import { decodeAction } from '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
  wrong:

  const encodeReply = require('react-server-dom-webpack/client');

  correct:

  import { encodeReply } from 'react-server-dom-webpack/client';

  Used by meta-frameworks to encode the response payload from client-side data sent to a Server Action.

Quickstart

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.