Next.js Discord

Discord Forum

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it

Answered
Indian mackerel posted this in #help-forum
Open in Discord
Indian mackerelOP
 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... buildId=... assetPrefix="" initialCanonicalUrl=... initialTree=... initialHead=... globalErrorComponent={function} children=...>

when running npm run dev
Answered by European sprat
needs to be a client component
View full answer

33 Replies

European sprat
You've not provided any relevant info to try and help you
@European sprat You've not provided any relevant info to try and help you
Indian mackerelOP
this is the complete log
European sprat
how many pages do you have in your app?
Indian mackerelOP
many, also dynamic ones
you need the exact number?
European sprat
no but i would start narrowing it down to try and figure out which page has the issue
Indian mackerelOP
i think every one
lemme check
yeah everyone
so its either the footer, navbar or the layout
European sprat
put your code on github and share the link to the repo
and if you can't share that code then make a minimal reproduction of the issue
@European sprat and if you can't share that code then make a minimal reproduction of the issue
Indian mackerelOP
this is the base layout.js complete code
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";

import { Inter, Poppins, Roboto_Mono, Ubuntu } from "next/font/google";

import "@styles/globals.scss";
import Toaster from "@/components/Toaster/Toaster";

const inter = Inter({
    subsets: ["latin"],
    weight: "variable",
    variable: "--inter",
});

const poppins = Poppins({
    subsets: ["latin"],
    weight: ["300", "400", "500", "600"],
    variable: "--poppins",
});

const ubuntu = Ubuntu({
    subsets: ["latin"],
    weight: ["500", "700"],
    variable: "--ubuntu",
});

const robotoMono = Roboto_Mono({
    subsets: ["latin"],
    weight: "variable",
    variable: "--roboto-mono",
});

export const metadata = {
    title: {
        default: "Tuttocoding",
        template: "%s - Tuttocoding",
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="it">
            <body
                className={`${inter.variable} ${poppins.variable} ${ubuntu.variable} ${robotoMono.variable}`}>
                {/* <Navbar /> */}
                {/* <Toaster /> */}
                {/* <main>{children}</main> */}
                {/* <Footer /> */}
            </body>
        </html>
    );
}
as you can see it has no content, still throws that error
European sprat
what if you just have <main>{children}</main> and leave the rest out?
Indian mackerelOP
    <html lang="it">
            <body
                className={`${inter.variable} ${poppins.variable} ${ubuntu.variable} ${robotoMono.variable}`}>
                {/* <Navbar /> */}
                {/* <Toaster /> */}
                <main>{children}</main>
                {/* <Footer /> */}
            </body>
        </html>
?
European sprat
and does it work or not?
Indian mackerelOP
no
European sprat
ok then it's one of your pages
share a link to your repo or create a minimal reproduction
Indian mackerelOP
// import Content from "./test";

export default function Page() {
    return <h1>HW</h1>
    // return <Content />;
}

this is the page im trying to route to
how can it be another page
European sprat
you said you get those errors when you run next dev and that you have many pages and you think there's an issue with all of them
so either, by process of elimination, rename all your pages except for one at a time and see if the build works or share your code
the global-error page
// global-error.js

import styles from "@styles/404.module.scss";

import Link from "next/link";

export const metadata = {
    title: "Errore",
};

export default function Page() {
    return <>
    <div className={styles["main-container"]}>
        <div className={styles.error}>
            <span className={styles["four-oh-four"]}>500</span>
            <div className={styles.stroke}></div>
            <span className={styles.typing}>
                Si è verificato un errore inaspettato
            </span>
        </div>
        <div className={styles.links}>
            <span>
                L{"'"}errore persiste?{" "}
                <Link aria-label="Contattaci" href="/contattaci">
                    Contattaci
                </Link>
            </span>
            <span className={styles.or}>oppure</span>
            <Link aria-label="Torna alla homepage" href="/">
                Torna alla homepage
            </Link>
        </div>
    </div>
</>
}
whats wrong
European sprat
needs to be a client component
Answer
Indian mackerelOP
😐 😐 😐
a more meaningful error might have been nice
thanks for your time