Next.js Discord

Discord Forum

You are attempting to export "metadata" from a component marked with "use client", which is disallow

Unanswered
American Sable posted this in #help-forum
Open in Discord
Avatar
American SableOP
So I'm getting this error on MacOS ONLY. On my Windows machine, I don't get this error and my project is loading fine.

I'm not really sure why its throwing up in my layout.js, as this isn't marked "use client". Within components in my layout, i do have use client marked files, but this is normal.

Any idea why this isn't working on MacOS, but is fine on Windows?

For what its worth, adding "use client" to the layout.js file didnt do anything either

35 Replies

Avatar
American SableOP
Anyone got any ideas?
Avatar
American SableOP
Nope. Literally can't develop on my Mac because of this.
Avatar
joulev
try deleting .next
Avatar
White-tailed Tropicbird
No difference. I updated all dependencies, even reinstalled node. It's still happening...
Avatar
joulev
then idk. i have been using my mac to develop, no problems happening
Avatar
American SableOP
Yep, still have the same problem here too
Image
Avatar
American SableOP
Have spent an entire day developing on windows again, no issue. Trashed the local project on my mac, repulled it, and still running into this issue
must be something going on as the default /app/page loads fine
Avatar
American SableOP
Anyone got any ideas what might be causing this
i am stumped
I'm trying to go to /owners/bookables/new
in src/app/owners/bookables/new I have page.js and layout.js
page.js
export default function Bookables() {
  return (
    <>
      <h1>{pages.owners.bookables.name}</h1>
    </>
  );


layout.js
export default function BookablesLayout({ children }) {
  return (
    <>{children}</>
  );
}
I also have a layout.js in src/app/owners

export default function OwnersLayout({ children }) {
  return (
    <>{children}</>
  );
}
Anyone got a clue what is causing this
Avatar
Golden-winged Warbler
from the screenshot error you posted, the issue looks to be in your root layout, do you have 'use client' and export metadata = ... there?
perhaps the issue of mac vs win is more that mac is catching this error while windows is not?
Avatar
American SableOP
Nope :/
I've just created a new project on macos to replicate it, and it wont replicate
but this project was created on windows and cloned to mac
interesting, i think i might have found the cause
It seem this component i use as a Dashboard is causing it
"use client";
import { Bars3Icon } from "@heroicons/react/24/outline";
import { useState } from "react";
import { supabaseClient } from "@/utils/supabase.client";
import { Mobile, Desktop } from "./Sidebar";
import { DashboardContainer } from "@/app/layout";

export default function Dashboard({ children }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const handleLogout = async () => {
    const { error } = await supabaseClient.auth.signOut();

    if (error) {
      console.log(error);
    }
  };

  return (
    <>
      <div className="bg-gray-100 h-screen">
        <Mobile
          sidebarOpen={sidebarOpen}
          setSidebarOpen={setSidebarOpen}
          logout={() => handleLogout()}
        />
        <Desktop logout={() => handleLogout()} />
        <div className="md:pl-64 flex flex-col flex-1 ">
          <div className="sticky top-0 z-10 bg-gray-50 pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
            <button
              type="button"
              className="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
              onClick={() => setSidebarOpen(true)}
            >
              <span className="sr-only">Open sidebar</span>
              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
            </button>
          </div>
          <main>
            <DashboardContainer>{children}</DashboardContainer>
          </main>
        </div>
      </div>
    </>
  );
}
Avatar
Golden-winged Warbler
yeah, look like you are using layouts incorrectly, you should not import them into child components
Avatar
American SableOP
Right
So it seems, within app/layout i had this
import "./globals.css";
import { Inter } from "next/font/google";
// import { pages, profile } from "@/configuration";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "test",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

export function DashboardContainer({ children }) {
  return <div className="w-auto m-4">{children}</div>;
}
Avatar
Golden-winged Warbler
I believe route groups is the right way to have different "root" layouts
https://nextjs.org/docs/app/building-your-application/routing/route-groups
Avatar
American SableOP
and then i was importing DashboardContainer and that was causing the issue
Yeah the layout structure is fine
but importing that DashboardContainer which was exported from another layout file caused the issue
odd that it doesnt cause a problem on windows though
built fine, served fine etc
ironically, on a new project, this logic is fine
Avatar
Golden-winged Warbler
a new project is not importing the root layout file into a component that eventually becomes a child of that same layout