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

Same boundary as the default-export case, but for named exports: the webpack node loader rewrites every named export of a 'use client' module to registerClientReference(function(){ throw ... }, url, name). The throw executes only if server code calls that named export — rendering it as a component or passing it as a prop stays legal, calling it from the server does not.

Source

Thrown at packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.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. Split the file: plain functions into a directive-free shared module, components stay in 'use client'
2. Make the server-side equivalent a 'use server' action if it must execute on the server
3. Pass the client function as a prop to a Client Component instead of invoking it from server code

Example fix

// before
// client-helpers.js: 'use client';
export function track(event){ window.analytics(event); }
// server component:
import {track} from './client-helpers';
track('pageview'); // throws

// after
// analytics.js (no directive, isomorphic):
export function track(event){ if (typeof window !== 'undefined') window.analytics(event); }
import {track} from './analytics';

const CLIENT_REFERENCE = Symbol.for('react.client.reference');
function isClientReference(value) {
  return value != null && value.$$typeof === CLIENT_REFERENCE;
}
if (isClientReference(save)) passAsProp(save); else save(data);

try { save(payload); } catch (e) {
  if (/Attempted to call \w+\(\) from the server but \w+ is on the client/.test(e.message)) {
    throw new Error(`${name} lives in a 'use client' module; move it to a shared module or make it a 'use server' action.`);
  }
  throw e;
}

When it happens

Trigger: Server code calls a named export of a 'use client' file: import {save} from './actions-client'; save(data). The proxy function throws with the export name and module URL embedded.

Common situations: Helper/hook files given 'use client' for internal state but still consumed as functions by the server tree | Passing a function reference into a client prop (fine) but then a second server path invokes it (throws) | Migrating components to RSC without sorting which exports are components vs plain functions

Related errors

• Attempted to call the default export of ${url} from the serv
• Cannot await or return from a thenable. You cannot await a c
• Cannot access ${expression} on the server. You cannot dot in
• Cannot assign to a client module from a server module.
• Attempted to call the default export of ${moduleId} from the

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