{"id":14883,"library":"react-server-dom-webpack","title":"React Server Components (DOM/Webpack Bindings)","description":"react-server-dom-webpack is a core utility package providing the necessary bindings for integrating React Server Components with the DOM environment when using Webpack for bundling. Currently stable at version 19.2.5, it receives frequent updates, primarily focusing on security hardening, DoS mitigations for Server Actions, and protection against rendering cycles. Unlike most React libraries, this package is explicitly designed for integration into meta-frameworks (such as Next.js or Remix) rather than for direct consumption by application developers. Its role is to bridge the server and client rendering processes, enabling the hydration of server-generated component trees on the client side and facilitating communication for Server Actions. Key differentiators include its tight coupling with Webpack's module system and its foundational role in the React Server Components paradigm, managing the serialization and deserialization of component payloads and server references.","status":"active","version":"19.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript","react"],"install":[{"cmd":"npm install react-server-dom-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add react-server-dom-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-server-dom-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for component definition and rendering.","package":"react","optional":false},{"reason":"Client-side DOM rendering utilities for React, specifically for hydrating server-rendered content.","package":"react-dom","optional":false},{"reason":"Bundler required for resolving client component references and handling module graphs in RSC environments.","package":"webpack","optional":false}],"imports":[{"note":"Used by meta-frameworks on the client to consume RSC payloads from a fetch response. Not for direct application developer use.","wrong":"const createFromFetch = require('react-server-dom-webpack/client');","symbol":"createFromFetch","correct":"import { createFromFetch } from 'react-server-dom-webpack/client';"},{"note":"Part of the client-side runtime for decoding Server Action arguments when a Server Action is invoked. Intended for framework integration.","wrong":"const decodeAction = require('react-server-dom-webpack/client');","symbol":"decodeAction","correct":"import { decodeAction } from 'react-server-dom-webpack/client';"},{"note":"Used by meta-frameworks to encode the response payload from client-side data sent to a Server Action.","wrong":"const encodeReply = require('react-server-dom-webpack/client');","symbol":"encodeReply","correct":"import { encodeReply } from 'react-server-dom-webpack/client';"}],"quickstart":{"code":"// This code is a highly simplified conceptual example of how a meta-framework\n// might internally use react-server-dom-webpack on the client side.\n// Application developers should NOT import this package directly.\n\nimport { createFromFetch } from 'react-server-dom-webpack/client';\nimport { hydrateRoot } from 'react-dom/client';\n\nasync function renderServerComponentRoot(rootElementId: string, serverComponentUrl: string) {\n  const rootElement = document.getElementById(rootElementId);\n  if (!rootElement) {\n    console.error(`Root element with ID \"${rootElementId}\" not found.`);\n    return;\n  }\n\n  try {\n    // Simulate fetching the Server Component payload from a server endpoint.\n    // In a real meta-framework, this would be handled by a sophisticated router.\n    const response = await fetch(serverComponentUrl, {\n      headers: {\n        Accept: 'text/x-component', // Standard header for RSC payloads\n      },\n    });\n\n    if (!response.ok) {\n      throw new Error(`Failed to fetch Server Component: ${response.statusText}`);\n    }\n\n    // createFromFetch reads the RSC payload from the response body.\n    // It returns a React element that represents the Server Component tree.\n    const serverComponent = createFromFetch(response, {\n      // client-reference map (Webpack bundle map) would be provided here\n      // by the meta-framework to resolve client components\n      async callServer(id, args) {\n        // This function is called when a Server Action is invoked from the client.\n        // It's part of the RSC client runtime, facilitating communication back to the server.\n        const body = JSON.stringify({ id, args });\n        const res = await fetch('/_server_action', {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body,\n        });\n        return res.json();\n      },\n    });\n\n    // Hydrate the existing HTML generated by the server with the React Server Component tree.\n    // This connects client-side interactivity to the server-rendered content.\n    hydrateRoot(rootElement, serverComponent);\n\n    console.log('React Server Components hydrated successfully.');\n  } catch (error) {\n    console.error('Error hydrating React Server Components:', error);\n  }\n}\n\n// Example usage within a simulated meta-framework client entry point\ndocument.addEventListener('DOMContentLoaded', () => {\n  renderServerComponentRoot('root', '/rsc-payload'); // Imagine '/rsc-payload' serves your RSC data\n});\n\n// A placeholder for a basic HTML file (index.html) that this might hydrate:\n// <div id=\"root\"><!-- Server-rendered content will go here, or be replaced/hydrated --></div>\n// Note: This example is illustrative. A real setup is far more complex.","lang":"typescript","description":"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."},"warnings":[{"fix":"Use a meta-framework that supports React Server Components rather than attempting to integrate this package manually.","message":"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.","severity":"gotcha","affected_versions":">=19.0.0"},{"fix":"Ensure your meta-framework is updated to a version compatible with React 19.x and these security patches.","message":"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.","severity":"breaking","affected_versions":">=19.0.3"},{"fix":"Consult the documentation of your chosen meta-framework for proper setup and configuration related to React Server Components and Webpack.","message":"Requires specific Webpack configuration to function correctly within a React Server Components setup, including resolving client component references and handling module boundaries.","severity":"gotcha","affected_versions":">=19.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to import `react-server-dom-webpack/client` directly into an application without a meta-framework managing the RSC build process.","error":"Module not found: Error: Can't resolve 'react-server-dom-webpack/client' in 'your-project-path'"},{"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.","cause":"Using `createFromFetch` without providing a `callServer` function in the options object, which is necessary for handling Server Actions.","error":"TypeError: Cannot read properties of undefined (reading 'callServer') in createFromFetch options"}],"ecosystem":"npm"}