{"record":{"id":"4e530f6b545b1870","repo":"facebook/react","slug":"react-dom-client-is-not-supported-in-react-server","errorCode":null,"errorMessage":"react-dom/client is not supported in React Server Components.","messagePattern":"react-dom/client is not supported in React Server Components\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-dom/npm/client.react-server.js","lineNumber":3,"sourceCode":"'use strict';\n\nthrow new Error(\n  'react-dom/client is not supported in React Server Components.'\n);\n","sourceCodeStart":1,"sourceCodeEnd":6,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom/npm/client.react-server.js#L1-L6","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Add 'use client' as the first statement of the module that imports react-dom/client","Move createRoot/hydrateRoot calls into a dedicated client entry file that is never imported from Server Components","Audit the server graph (bundler trace, next.js build output, server-only package) to find what transitively pulls in react-dom/client","Fix resolver conditions so only the RSC build uses react-server and client bundles resolve the browser entry"],"exampleFix":"// before: chart.jsx (no directive) imported by a Server Component\nimport {createRoot} from 'react-dom/client';\n\n// after: chart.jsx\n'use client';\nimport {createRoot} from 'react-dom/client';","handlingStrategy":"validation","validationCode":"// build-time guard: fail the build if the server graph pulls in react-dom/client\n// webpack 5\nimport webpack from 'webpack';\nnew webpack.NormalModuleReplacementPlugin(/react-dom\\/client$/, (resource) => {\n  throw new Error(`Server graph must not import react-dom/client: ${resource.request}`);\n});","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Put 'use client' at the top of every module that imports react-dom/client","Isolate createRoot/hydrateRoot in a client entry file never reachable from Server Components","Use the server-only package marker in modules that must never leak into client code, and lint for react-dom/client imports in server-only graphs","Keep bundler resolve.conditions correct: react-server condition only for the RSC bundle"],"tags":["react-server-components","react-dom-client","bundler","use-client","createroot"],"backgroundTag":"client-only-module-in-rsc","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}