{"record":{"id":"9f58dfc7f9be8885","repo":"facebook/react","slug":"cannot-read-symbol-exports-only-named-exports-are-9f58df","errorCode":null,"errorMessage":"Cannot read Symbol exports. Only named exports are supported on a client module imported on the server.","messagePattern":"Cannot read Symbol exports\\. Only named exports are supported on a client module imported on the server\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js","lineNumber":291,"sourceCode":"          function then(resolve, reject: any) {\n            // Expose to React.\n            return Promise.resolve(resolve(proxy));\n          } as any,\n          // If this is not used as a Promise but is treated as a reference to a `.then`\n          // export then we should treat it as a reference to that name.\n          target.$$id + '#then',\n          false,\n        ));\n        return then;\n      } else {\n        // Since typeof .then === 'function' is a feature test we'd continue recursing\n        // indefinitely if we return a function. Instead, we return an object reference\n        // if we check further.\n        return undefined;\n      }\n  }\n  if (typeof name === 'symbol') {\n    throw new Error(\n      'Cannot read Symbol exports. Only named exports are supported on a client module ' +\n        'imported on the server.',\n    );\n  }\n  let cachedReference = target[name];\n  if (!cachedReference) {\n    const reference: ClientReference<any> = registerClientReferenceImpl(\n      function () {\n        throw new Error(\n          // eslint-disable-next-line react-internal/safe-string-coercion\n          `Attempted to call ${String(name)}() from the server but ${String(name)} is on the client. ` +\n            `It's not possible to invoke a client function from the server, it can ` +\n            `only be rendered as a Component or passed to props of a Client Component.`,\n        );\n      } as any,\n      target.$$id + '#' + name,\n      target.$$async,\n    );","sourceCodeStart":273,"sourceCodeEnd":309,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js#L273-L309","documentation":"Client module proxies serialize references as 'moduleId#exportName' strings, so only string-named exports can cross the server boundary. Reading a symbol-keyed property (any symbol other than the whitelisted Symbol.toPrimitive/Symbol.toStringTag) from a 'use client' module namespace on the server throws — there is no serializable name for the reference.","triggerScenarios":"clientMod[Symbol.iterator], mod[customSymbol], or Object.getOwnPropertySymbols(mod) followed by reads, executed against a 'use client' namespace in server code. Dependency-injection containers, iterable protocols, or test mock walkers probing modules by symbol.","commonSituations":"Reflective libraries (DI containers, registries, iterable helpers) touching client-module namespaces; spreading or destructuring that consults symbol keys; mixing import * as namespaces of client modules into meta-programming code.","solutions":["Import only the specific string-named exports you need instead of reflecting over the namespace","Keep symbol-keyed APIs in shared (non-'use client') modules that the server imports directly","Build a plain object on the server containing just the exports you need and hand that to reflective code"],"exampleFix":"// before\nimport * as clientMod from './client'; // 'use client'\nconst iter = clientMod[Symbol.iterator]; // symbol read -> throws\n\n// after\nimport {items} from './client'; // named string export\nconst iter = items[Symbol.iterator];","handlingStrategy":"validation","validationCode":"function readExport(mod, key) {\n  if (typeof key === 'symbol' && isClientReference(mod)) {\n    // Symbol exports cannot cross the RSC boundary.\n    return undefined;\n  }\n  return mod[key];\n}","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 reflect over 'use client' namespaces with Object.getOwnPropertySymbols","Keep symbol-keyed APIs (registries, iterables, DI tokens) in directive-free modules","Hand reflective code a plain object of named exports built on the server"],"tags":["react-server-components","use-client","client-reference","symbol","esm"],"backgroundTag":"rsc-client-reference-violation","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}