vercel/next.js · error

Attempted to call the default export of {server_module_path}

Error message

Attempted to call the default export of {server_module_path} 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.

What it means

Generated by Turbopack's EcmascriptClientReferenceModule proxy: when a file marked with 'use client' is imported on the server, the framework registers its default export as a `registerClientReference` whose body throws this message if *called*. React Server Components may pass client components as elements/props, but invoking a client function directly from server code is impossible because client code never runs on the server. The proxy throws at the call site to surface the boundary violation.

Source

Thrown at crates/next-core/src/next_client_reference/ecmascript_client_reference/ecmascript_client_reference_module.rs:102

            if !exports.dynamic_exports.is_empty() {
                // TODO: throw? warn?
            }

            writedoc!(
                code,
                r#"
                    // This file is generated by next-core EcmascriptClientReferenceModule.
                    import {{ registerClientReference }} from "react-server-dom-turbopack/server";
                "#,
            )?;

            for export_name in exports.exports.keys() {
                if export_name == "default" {
                    writedoc!(
                        code,
                        r#"
                            export default registerClientReference(
                                function() {{ throw new Error({call_err}); }},
                                {server_module_path},
                                "default",
                            );
                        "#,
                        call_err = StringifyJs(&format!(
                            "Attempted to call the default export of {server_module_path} 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."
                        )),
                        server_module_path = StringifyJs(server_module_path),
                    )?;
                } else {
                    writedoc!(
                        code,
                        r#"
                            export const {export_name} = registerClientReference(
                                function() {{ throw new Error({call_err}); }},

View on GitHub (pinned to 0ae8c72462)

Solutions

  1. Render the client default as a component (`<ClientDefault {...props} />`) instead of calling it.
  2. If you need its *behavior* on the server, move that logic into a server module without 'use client', or extract a shared server-safe utility.
  3. If you need to pass it to a Client Component, pass the component reference itself (not its invocation) as a prop.
  4. Search the server file for direct calls `(...)` on imports coming from 'use client' files and convert them to JSX or remove them.

Example fix

// before (server component)
import ClientHelper from './client-helper' // 'use client'
const data = ClientHelper(arg) // throws

// after — render as component or move logic server-side
import ClientHelper from './client-helper'
return <ClientHelper arg={arg} />
Defensive patterns

Strategy: type-guard

Validate before calling

// In server code, never call a client default as a function.
// Instead, render or pass it:
import ClientComp from './client-comp' // 'use client'
// ❌ ClientComp(arg)
// ✅
return <ClientComp arg={arg} />

Type guard

// A 'use client' boundary can be detected by reading the file header:
function isClientModule(src: string): boolean {
  return /^['"]use client['"]/m.test(src.slice(0, 1000))
}

Prevention

When it happens

Trigger: In a Server Component (or server-only module), calling the default export of a 'use client' module as a function: `const result = ClientDefault()` instead of `<ClientDefault />` or passing `ClientDefault` as a prop. Also happens when a client component's default is a hook/util and you invoke it from server code.

Common situations: Forgetting the 'use client' boundary and calling a client-side helper from an RSC; passing a client module's default into server logic expecting a function return value; migrating a Pages Router shared util into App Router without splitting server/client.

Related errors


AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/6ae7640d97180286. Report an issue: GitHub.