Next.js Discord

Discord Forum

Noob: Type 'Element' is not assignable to type 'ReactNode'.

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Type 'Element' is not assignable to type 'ReactNode'.
  Type 'Element' is not assignable to type 'ReactPortal'.ts(2322)
index.d.ts(1434, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>'


layout.tsx looks like:
import "./globals.css";
import type { Metadata } from "next";
import clsx from "clsx";
import { Nunito, Nunito_Sans } from "next/font/google";
import { createClient, repositoryName } from "@/prismicio";
import { PrismicPreview } from "@prismicio/next";

import Header from "@/components/Header";
import Footer from "@/components/Footer";

const nunito = Nunito({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-nunito',
})

const nunitoSans = Nunito_Sans({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-nunito-sans',
})

export async function generateMetadata(): Promise<Metadata> {
  const client = createClient();
  const settings = await client.getSingle('settings');

  return {
    title: settings.data.site_title || 'Default Title FALLBACK',
    description: settings.data.meta_description || 'Default Description FALLBACK',
    openGraph: {
      images: [settings.data.og_image.url || ""],
    },
  }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={clsx(nunito.variable, nunitoSans.variable)}>
      <body>
        <Header/>
        {children}
        <Footer/>
      </body>
    </html>
  )
}

0 Replies