Next.js Discord

Discord Forum

A weird problem with Next client components and framer motion?

Answered
Hunting wasp posted this in #help-forum
Open in Discord
Hunting waspOP
So I'm trying to utilize motion (previously framer-motion) on my site, and i make the component using it a client component which works in other projects of mine, however when doing that it makes the parent layout.tsx error for some reason, when thats a server component? the error is saying i cant export metadata in the layout because it doesnt have client component marked at the top, however nothing in there is a client component at all, there is a child element IN that layout that is which is the thing that uses framer... im so confused lmao

main app layout that errors:
export const metadata: Metadata = {
    title: {
        default: appConfig.appName,
        template: `%s • ${appConfig.appName}`,
    },
    ...
};
export const viewport: Viewport = { themeColor: "#FFAA00" };

const RootLayout = ({
    children,
}: Readonly<{
    children: ReactNode;
}>) => (
    <html lang="en" suppressHydrationWarning>
        <body
            className={cn(
                "antialiased scroll-smooth select-none",
                roboto.className
            )}
        >
            <AppProviders>
                <div className="relative min-h-screen">
                    {/* Background */}
                    <div className="fixed inset-0 h-screen w-screen bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(228,153,1,0.15),rgba(255,255,255,0))] z-[-2]" />

                    <div className="mx-auto max-w-screen-3xl relative">
                        {children}
                    </div>
                    <Footer />
                </div>
            </AppProviders>
        </body>
    </html>
);
export default RootLayout;


child element with "use client" and motion:
"use client";

const HeroSection = ({
    server,
}: {
    server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer;
}): ReactElement => (
    <LandingHeader className="min-h-[45rem]">
        {/* Content */}
        <div className="flex flex-col gap-1 items-center z-10">
            <motion.div
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
            >
                <AppLogo className="mb-4" size="5xl" />
            </motion.div>
        </div>
        ...


thanks in advance!
Answered by Hunting wasp
---

fixed this i was just being dumb, i realized i was importing my font in that client component which was from my layout 😭
View full answer

2 Replies

Hunting waspOP
my next config is also below (utilizing a custom server.ts as well) if anybody would like to take a look
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    reactStrictMode: true,
    poweredByHeader: false,
    images: { unoptimized: true },
    eslint: { ignoreDuringBuilds: true },
    typescript: { ignoreBuildErrors: true },
    experimental: {
        reactCompiler: true,
        // nodeMiddleware: true,
    },
    transpilePackages: ["@t3-oss/env-nextjs", "@t3-oss/env-core"],
};
export default nextConfig;
Hunting waspOP
---

fixed this i was just being dumb, i realized i was importing my font in that client component which was from my layout 😭
Answer