I'm getting the error "You are attempting to export "metadata" from a component marked with "use client", which is disallowed."

I don't have "use client" anywhere, I'm not even importing anything that uses "use client".

Here is my index.tsx:

import type { ReactElement } from 'react'
import Layout from '@/components/layout'
import type { NextPageWithLayout } from '@/pages/_app'

const Page: NextPageWithLayout = () => {
return (
<div>Happy little trees</div>
);
}

Page.getLayout = function getLayout(page: ReactElement) {
return (
<Layout>
{page}
</Layout>
)
}

export default Page;

Here is /components/layout.tsx:

import type { Metadata } from "next";
import { Inter } from "next/font/google";

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

export const metadata: Metadata = {
title: "🍊✅",
description: "orangetask 0.1.0",
};

export default function Layout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<main>{children}</main>
);
}

and here is /pages/_app.tsx:

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'

import "../styles/globals.css";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page)

return getLayout(<Component {...pageProps} />)
}