{"record":{"id":"e97245dcb2f1983a","repo":"facebook/react","slug":"cannot-assign-to-a-client-module-from-a-server-mod-e97245","errorCode":null,"errorMessage":"Cannot assign to a client module from a server module.","messagePattern":"Cannot assign to a client module from a server module\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js","lineNumber":204,"sourceCode":"        // This allows server components to render <ClientContext.Provider>\n        // which will be serialized and executed on the client.\n        return receiver;\n      case 'then':\n        throw new Error(\n          `Cannot await or return from a thenable. ` +\n            `You cannot await a client module from a server component.`,\n        );\n    }\n    // eslint-disable-next-line react-internal/safe-string-coercion\n    const expression = String(target.name) + '.' + String(name);\n    throw new Error(\n      `Cannot access ${expression} on the server. ` +\n        'You cannot dot into a client module from a server component. ' +\n        'You can only pass the imported name through.',\n    );\n  },\n  set: function () {\n    throw new Error('Cannot assign to a client module from a server module.');\n  },\n};\n\nfunction getReference(target: Function, name: string | symbol): $FlowFixMe {\n  switch (name) {\n    // These names are read by the Flight runtime if you end up using the exports object.\n    case '$$typeof':\n      return target.$$typeof;\n    case '$$id':\n      return target.$$id;\n    case '$$async':\n      return target.$$async;\n    case 'name':\n      return target.name;\n    // We need to special case this because createElement reads it if we pass this\n    // reference.\n    case 'defaultProps':\n      return undefined;","sourceCodeStart":186,"sourceCodeEnd":222,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js#L186-L222","documentation":"The 'set' trap of the deep proxy around each named client export throws on every assignment. A server module cannot mutate a client module's exports — the mutation would have to execute in the browser where the module's code lives, so React blocks all writes from the server graph.","triggerScenarios":"Assigning to a named client export from server code: Chart.theme = 'dark', Button.displayName = 'X', Icons.registry = obj. Monkey-patching a client export during SSR; instrumentation or test setup that assigns statics onto imports.","commonSituations":"HOC/decorator wrappers that assign statics to components; dev instrumentation patching imported modules; attempts to configure a client library from the server by mutating its exports; codemods or hot-reload shims writing into module objects.","solutions":["Remove the assignment — configure client components via props or context from the server","Move shared mutable state into a module without the 'use client' directive that both sides import","Run any required module patching in client-side code or tests against the client build, never in the server graph"],"exampleFix":"// before (server code)\nimport { store } from './store'; // 'use client'\nstore.theme = 'dark'; // assignment -> throws\n\n// after (server component passes config down)\n// <StoreProvider initialTheme=\"dark\"><App/></StoreProvider>","handlingStrategy":"validation","validationCode":"function assertAssignable(target) {\n  if (isClientReference(target)) {\n    throw new Error('Refusing to assign to a client reference from server code — use props/context instead.');\n  }\n}\n// assertAssignable(Chart); Chart.theme = 'dark';","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\n\nfunction isClientReference(value) {\n  return (\n    value !== null &&\n    (typeof value === 'object' || typeof value === 'function') &&\n    value.$$typeof === CLIENT_REFERENCE_TAG\n  );\n}","tryCatchPattern":null,"preventionTips":["Never mutate imports from 'use client' modules in server code","Pass configuration down through props or context instead of patching exports","Keep module patching in client-side code or tests against the client build"],"tags":["react-server-components","use-client","client-reference","proxy","mutation"],"backgroundTag":"rsc-client-reference-violation","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}