Next.js Discord

Discord Forum

Next 14.2.8 Font Error

Unanswered
Bee posted this in #help-forum
Open in Discord
BeeOP
With the new default page layout, i get this error on all newly generated next apps
"An error occurred in next/font.

TypeError: Cannot read properties of undefined (reading 'ascent')"

15 Replies

share your layout
BeeOP
I didn't change anything, it's the default next.js 14.2.8 layout
i just run npm run dev after npx create-next-app@latest
@Bee I didn't change anything, it's the default next.js 14.2.8 layout
gin
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}
replace your layout with that
and try again
BeeOP
Your code it's the same that i have inside layout.tsx, the default one generated by create-next-app
the only thing i changed from all options in create-next-app it's the import alias, i change it from default @/* to ~/*
BeeOP
This is causing the problem. I guess there is something behind the scenes caused by this custom import
gin
are u sure the import is correct
BeeOP
Yap, i just tried, if i let the default import alias @/* it works but if i setup custom one ~/* it gives this error. Weird conflict
BeeOP
I use ~ instead of @ in import alias of most of my apps, just personal preference

It’s never been an issue until now