facebook/react · error · Error

Attempted to call ${name}() from the server but ${name} is o

Error message

Attempted to call ${name}() from the server but ${name} is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

What it means

The unbundled Node loader rewrites every named export of a 'use client' module into a registered client reference whose function body throws. Calling a named export from server code triggers it: client functions can never execute on the server — they may only be rendered as Components or forwarded as props to Client Components so the browser runs them.

Source

Thrown at packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js:607

  for (let i = 0; i < names.length; i++) {
    const name = names[i];
    if (name === 'default') {
      newSrc += 'export default ';
      newSrc += 'registerClientReference(function() {';
      newSrc +=
        'throw new Error(' +
        JSON.stringify(
          `Attempted to call the default export of ${url} from the server ` +
            `but it's on the client. It's not possible to invoke a client function from ` +
            `the server, it can only be rendered as a Component or passed to props of a ` +
            `Client Component.`,
        ) +
        ');';
    } else {
      newSrc += 'export const ' + name + ' = ';
      newSrc += 'registerClientReference(function() {';
      newSrc +=
        'throw new Error(' +
        JSON.stringify(
          `Attempted to call ${name}() from the server but ${name} is on the client. ` +
            `It's not possible to invoke a client function from the server, it can ` +
            `only be rendered as a Component or passed to props of a Client Component.`,
        ) +
        ');';
    }
    newSrc += '},';
    newSrc += JSON.stringify(url) + ',';
    newSrc += JSON.stringify(name) + ');\n';
  }

  // TODO: Generate source maps for Client Reference functions so they can point to their
  // original locations.
  return newSrc;
}

async function loadClientImport(

View on GitHub (pinned to eafeac097b)

Solutions

1. Move pure helpers into a shared module without the 'use client' directive and import it from both server and client.
2. If the work must run in the browser, relocate the call into a client component and pass plain data over the boundary.
3. If the export is a component, render it (<Card/>) rather than calling Card().

Example fix

// before (server component)
import { getUserName } from './lib/user.client';
const name = getUserName(user.id);

// after: lib/user.js has no 'use client' directive
import { getUserName } from './lib/user';
const name = getUserName(user.id);

if (isClientReference(getUserName)) {
  throw new Error('getUserName lives on the client - move it to a shared module');
}

const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
export function isClientReference(value) {
  return typeof value === 'function' && value.$$typeof === CLIENT_REFERENCE_TAG;
}

When it happens

Trigger: Server code does `import { getUserName } from './user.client'; getUserName(id)` — invoking a named export of a 'use client' module as a function on the server.

Common situations: Shared utility barrels marked 'use client' whose functions are called in server components; event-handler/validate helpers defined in client files and reused on the server; calling a client component factory function instead of rendering its result in JSX.

Related errors

• Attempted to call the default export of ${url} from the serv
• Attempted to call ${String(name)}() from the server but ${St
• The source map has more mappings than there are lines.
• Cannot have both "use client" and "use server" directives in
• 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/d2b0e98bb28a2de4. Report an issue: GitHub.