{"id":11853,"library":"react-server-dom-turbopack","title":"React Server Components for Turbopack","description":"react-server-dom-turbopack provides the foundational bindings for integrating React Server Components (RSC) with Turbopack, a high-performance build system. It is specifically designed as a low-level API for meta-frameworks (e.g., Next.js) to manage the serialization and deserialization of RSC payloads between server and client, enabling features like streaming and Server Actions. This package is not intended for direct consumption by application developers, but rather as an internal dependency within frameworks. The current stable version is 19.2.5, aligning with React's release cycle, which sees frequent updates, often including security hardening and performance improvements related to RSC and Server Actions. Its key differentiator is its tight integration with Turbopack for optimal performance in environments leveraging that build tool.","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-turbopack","lang":"bash","label":"npm"},{"cmd":"yarn add react-server-dom-turbopack","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-server-dom-turbopack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for Server Components functionality.","package":"react","optional":false},{"reason":"React DOM for client-side hydration and rendering mechanisms.","package":"react-dom","optional":false}],"imports":[{"note":"This import path is for internal use by meta-frameworks on the client-side to consume RSC payloads. Direct application usage is strongly discouraged and unsupported.","wrong":"import { createFromReadableStream } from 'react-server-dom-turbopack';","symbol":"createFromReadableStream","correct":"import { createFromReadableStream } from 'react-server-dom-turbopack/client';"},{"note":"Used by frameworks to decode replies from Server Actions on the client. ESM syntax is preferred for React 19+ in client bundles. Not for direct application use.","wrong":"const { decodeReply } = require('react-server-dom-turbopack/client');","symbol":"decodeReply","correct":"import { decodeReply } from 'react-server-dom-turbopack/client';"},{"note":"This is a server-side API used by meta-frameworks to render React Server Components to a Node.js stream. Direct application usage is not supported.","symbol":"renderToPipeableStream","correct":"import { renderToPipeableStream } from 'react-server-dom-turbopack/server';"}],"quickstart":{"code":"/* This quickstart illustrates how a meta-framework *might* conceptually use\n * react-server-dom-turbopack. Application developers should NOT use this directly.\n * Instead, use a framework like Next.js that integrates React Server Components.\n */\n\n// Conceptual server-side rendering setup (framework-level)\nimport { renderToPipeableStream } from 'react-server-dom-turbopack/server';\n\nasync function serveReactServerComponent(req, res) {\n  const Component = () => {\n    // This would be a React Server Component in a real framework setup\n    return <h1>Hello from a Server Component!</h1>;\n  };\n\n  const { pipe } = renderToPipeableStream(<Component />);\n  res.setHeader('Content-Type', 'text/x-component');\n  pipe(res);\n}\n\n// Conceptual client-side hydration (framework-level)\nimport { createFromReadableStream } from 'react-server-dom-turbopack/client';\n\nasync function hydrateClientComponent() {\n  const response = await fetch('/rsc-payload'); // Imagine fetching the RSC payload\n  const stream = response.body;\n\n  if (!stream) {\n    throw new Error('Response body is not a readable stream.');\n  }\n\n  const { default: ServerComponent } = createFromReadableStream(stream);\n  // In a real framework, this 'ServerComponent' would be rendered into the DOM\n  // using ReactDOM.createRoot().render(<ServerComponent />);\n  // For this conceptual example, we'll just log its existence.\n  console.log('Server component received and ready for hydration:', ServerComponent);\n}\n\n// Example usage simulation (not runnable as a standalone app)\n// serveReactServerComponent(mockRequest, mockResponse);\n// hydrateClientComponent();\nconsole.log('This code illustrates framework-level integration and is not for direct use.');","lang":"typescript","description":"Illustrates the conceptual usage of `renderToPipeableStream` on the server and `createFromReadableStream` on the client, as a meta-framework would implement it. This is NOT for direct application use."},"warnings":[{"fix":"If you are developing a React application, use a framework that supports React Server Components (like Next.js) and follow its documentation. Do not import `react-server-dom-turbopack` directly into your application code.","message":"This package is explicitly not intended for direct import or use by application developers. It is a low-level internal API for meta-frameworks (e.g., Next.js) that integrate React Server Components with Turbopack. Direct usage will likely lead to integration problems, unexpected behavior, and lack of support.","severity":"breaking","affected_versions":">=19.0.0"},{"fix":"Regularly update your meta-framework (e.g., Next.js) to its latest stable release to ensure you have the most up-to-date security patches and performance improvements for React Server Components.","message":"Security hardening and DoS mitigations for Server Actions and Server Components are frequently updated in minor/patch releases (e.g., v19.2.4, v19.1.5, v19.0.4). While this is handled by your framework, being on the latest stable version of your framework is crucial to benefit from these protections.","severity":"gotcha","affected_versions":">=19.0.0"},{"fix":"Framework developers must ensure they import from the correct environment-specific paths: `react-server-dom-turbopack/server` for server-side code and `react-server-dom-turbopack/client` for client-side code.","message":"The package depends heavily on specific server and client entry points (e.g., `/server`, `/client`). Incorrectly importing from the root `react-server-dom-turbopack` or using the wrong entry point for the environment (server vs. client) will result in module resolution errors or runtime failures.","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":"Ensure you are using a meta-framework that handles this integration. If you are a framework developer, confirm your build system correctly resolves `react-server-dom-turbopack/client` or `react-server-dom-turbopack/server` based on the target environment.","cause":"Attempting to import the package directly without specifying the client or server entry point, or within an environment where Turbopack is not correctly configured.","error":"Module not found: Can't resolve 'react-server-dom-turbopack' in '...'"},{"fix":"Verify that `react` and `react-dom` peer dependencies are installed and compatible with version 19.x. Also, ensure your build toolchain (Turbopack) is configured to correctly process and bundle this module for the client environment.","cause":"This error typically indicates that the `react-server-dom-turbopack/client` module failed to initialize correctly, often due to an incorrect build environment or missing peer dependencies (`react`, `react-dom`).","error":"TypeError: Cannot read properties of undefined (reading 'createFromReadableStream') at Object.<anonymous> (react-server-dom-turbopack/client)"}],"ecosystem":"npm"}