You are attempting to export "metadata" from a component marked with "use client", which is disallow
Unanswered
American Sable posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
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](https://cdn.discordapp.com/embed/avatars/1.png)
American SableOP
Anyone got any ideas?
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
American SableOP
Nope. Literally can't develop on my Mac because of this.
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/f386ac21405ce3442e0f3598223e1cb3.webp?size=256)
joulev
try deleting
.next
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
White-tailed Tropicbird
No difference. I updated all dependencies, even reinstalled node. It's still happening...
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/f386ac21405ce3442e0f3598223e1cb3.webp?size=256)
joulev
then idk. i have been using my mac to develop, no problems happening
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
American SableOP
Yep, still have the same problem here too
![Image](https://cdn.discordapp.com/attachments/1126559153796698194/1128790599999426630/image.png)
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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](https://cdn.discordapp.com/embed/avatars/1.png)
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.jspage.js
layout.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](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/embed/avatars/1.png)
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](https://cdn.discordapp.com/embed/avatars/0.png)
Golden-winged Warbler
yeah, look like you are using layouts incorrectly, you should not import them into child components
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
American SableOP
Right
So it seems, within
app/layout
i had thisimport "./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](https://cdn.discordapp.com/embed/avatars/0.png)
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
https://nextjs.org/docs/app/building-your-application/routing/route-groups
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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](https://cdn.discordapp.com/embed/avatars/0.png)
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