React Server Components for Turbopack

Common errors

• Module not found: Can't resolve 'react-server-dom-turbopack' in '...'

  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.
  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.

• TypeError: Cannot read properties of undefined (reading 'createFromReadableStream') at Object.<anonymous> (react-server-dom-turbopack/client)

  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`).
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

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

Imports

• createFromReadableStream
  wrong:

  import { createFromReadableStream } from 'react-server-dom-turbopack';

  correct:

  import { createFromReadableStream } from 'react-server-dom-turbopack/client';

  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.
• decodeReply
  wrong:

  const { decodeReply } = require('react-server-dom-turbopack/client');

  correct:

  import { decodeReply } from 'react-server-dom-turbopack/client';

  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.
• renderToPipeableStream

  import { renderToPipeableStream } from 'react-server-dom-turbopack/server';

  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.

Quickstart

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.

/* This quickstart illustrates how a meta-framework *might* conceptually use
 * react-server-dom-turbopack. Application developers should NOT use this directly.
 * Instead, use a framework like Next.js that integrates React Server Components.
 */

// Conceptual server-side rendering setup (framework-level)
import { renderToPipeableStream } from 'react-server-dom-turbopack/server';

async function serveReactServerComponent(req, res) {
  const Component = () => {
    // This would be a React Server Component in a real framework setup
    return <h1>Hello from a Server Component!</h1>;
  };

  const { pipe } = renderToPipeableStream(<Component />);
  res.setHeader('Content-Type', 'text/x-component');
  pipe(res);
}

// Conceptual client-side hydration (framework-level)
import { createFromReadableStream } from 'react-server-dom-turbopack/client';

async function hydrateClientComponent() {
  const response = await fetch('/rsc-payload'); // Imagine fetching the RSC payload
  const stream = response.body;

  if (!stream) {
    throw new Error('Response body is not a readable stream.');
  }

  const { default: ServerComponent } = createFromReadableStream(stream);
  // In a real framework, this 'ServerComponent' would be rendered into the DOM
  // using ReactDOM.createRoot().render(<ServerComponent />);
  // For this conceptual example, we'll just log its existence.
  console.log('Server component received and ready for hydration:', ServerComponent);
}

// Example usage simulation (not runnable as a standalone app)
// serveReactServerComponent(mockRequest, mockResponse);
// hydrateClientComponent();
console.log('This code illustrates framework-level integration and is not for direct use.');