facebook/react · error · Error

react-dom/client is not supported in React Server Components

Error message

react-dom/client is not supported in React Server Components.

What it means

packages/react-dom/npm/client.react-server.js is a stub whose only statement is this throw. When a bundler builds a module graph with the react-server condition (React Server Components), any import of react-dom/client resolves to this stub and fails immediately at module evaluation: react-dom/client's createRoot/hydrateRoot are browser-only APIs and cannot exist in the server-components environment.

Source

Thrown at packages/react-dom/npm/client.react-server.js:3

'use strict';

throw new Error(
  'react-dom/client is not supported in React Server Components.'
);

View on GitHub (pinned to eafeac097b)

Solutions

1. Add 'use client' as the first statement of the module that imports react-dom/client
2. Move createRoot/hydrateRoot calls into a dedicated client entry file that is never imported from Server Components
3. Audit the server graph (bundler trace, next.js build output, server-only package) to find what transitively pulls in react-dom/client
4. Fix resolver conditions so only the RSC build uses react-server and client bundles resolve the browser entry

Example fix

// before: chart.jsx (no directive) imported by a Server Component
import {createRoot} from 'react-dom/client';

// after: chart.jsx
'use client';
import {createRoot} from 'react-dom/client';

// build-time guard: fail the build if the server graph pulls in react-dom/client
// webpack 5
import webpack from 'webpack';
new webpack.NormalModuleReplacementPlugin(/react-dom\/client$/, (resource) => {
  throw new Error(`Server graph must not import react-dom/client: ${resource.request}`);
});

When it happens

Trigger: Calling or importing createRoot/hydrateRoot from 'react-dom/client' inside a module that is part of the RSC (server) graph — a file without 'use client' that imports it, a client-only utility imported transitively by a Server Component, or a test/build config resolving react-dom with the react-server export condition.

Common situations: Forgetting the 'use client' directive on a component that mounts with createRoot; shared helpers re-exporting react-dom/client entry points; bundler/test setups (jest moduleNameMapper, custom webpack resolve.conditions) that apply the react-server condition to code that needs the client build; SSR libraries accidentally imported by Server Components.

Related errors

• Attempted to call the default export of ${url} from the serv
• Attempted to call ${name}() from the server but ${name} is o
• Cannot have both "use client" and "use server" directives in
• Attempted to load a Client Module outside the hosted root.
• Cannot await or return from a thenable. You cannot await a c

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/4e530f6b545b1870. Report an issue: GitHub.