ui
ui copied to clipboard
shadcn-ui
TypeError in Next.js Layout "fontSans" is not a valid Layout export field.
Issue Report: TypeError in Next.js Layout
Overview
This document outlines a type error encountered in a Next.js project, specifically with the layout file app/layout.tsx.
Description
The layout file app/layout.tsx does not match the required types for a Next.js layout component, resulting in a type error.
Steps to Reproduce
- Create or edit the layout component in
app/layout.tsx. - Integrate shadcn/ui guide font with a Next.js page.
- Build the project and observe the TypeScript error.
Expected Behavior
The layout component in app/layout.tsx should comply with the type requirements of Next.js layouts.
Error Message
Environment
- Next.js version: 14.0.4
- TypeScript version: 5
- OS: Mac OS 14.2
- Node.js version: 20.9.0
Same here. The shadcn/ui docs: https://ui.shadcn.com/docs/installation/next#fonts
In /app/layout.tsx, try removing export from const fontSans:
Before:
export const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
})
After:
const fontSans = FontSans({
subsets: ['latin'],
variable: "--font-sans",
})
Build no longer breaks (on Vercel).
I was looking at:
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
and noticed there's no export.
Maybe it's a bad copy-paste in:
https://ui.shadcn.com/docs/installation/next#fonts
coming from:
https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/fonts.ts
where /lib/fonts exports to /app/layout.tsx:
https://github.com/shadcn-ui/ui/blob/main/apps/www/app/layout.tsx)
If you want to use the font properties somehow, you can create font.tsx file, then move the font snippet code and export it:
font.tsx
import { Inter as FontSans } from "next/font/google";
// Will break at build. Waiting for https://github.com/shadcn-ui/ui/issues/2377
export const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
});
layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/theme-provider";
import { fontSans } from "./font";
export const metadata: Metadata = {
title: "My app",
description: "Testing Next 14 + shadcn/ui",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);
}
build
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
