An error occured in next/font that I can't seem to trace

[shashankdatta]

Summary

I wanted to use local fonts just like the tutorial and the examples do it in the nextjs13 latest and stable version documentation suggests. However, I run into this error every time:

> shashank-datta@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 1202 ms (365 modules)
- wait compiling...
- event compiled client and server successfully in 454 ms (365 modules)
- wait compiling /page (client and server)...
- error src/app/layout.js
An error occured in `next/font`.

TypeError: value.trim is not a function
    at isRange (/home/shashank/FullStackProjects/shashank-datta/node_modules/next/dist/build/webpack/loaders/next-font-loader/postcss-next-font.js:105:44)
    at Object.Once (/home/shashank/FullStackProjects/shashank-datta/node_modules/next/dist/build/webpack/loaders/next-font-loader/postcss-next-font.js:124:31)
    at LazyResult.runOnRoot (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:206:17)
- wait compiling /_error (client and server)...
- error src/app/layout.js
An error occured in `next/font`.

TypeError: value.trim is not a function
    at isRange (/home/shashank/FullStackProjects/shashank-datta/node_modules/next/dist/build/webpack/loaders/next-font-loader/postcss-next-font.js:105:44)
    at Object.Once (/home/shashank/FullStackProjects/shashank-datta/node_modules/next/dist/build/webpack/loaders/next-font-loader/postcss-next-font.js:124:31)
    at LazyResult.runOnRoot (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:206:17)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processImmediate (node:internal/timers:447:9)
- wait compiling /favicon.ico/route (client and server)...
- error src/app/layout.js
An error occured in `next/font`.

TypeError: value.trim is not a function
    at isRange (/home/shashank/FullStackProjects/shashank-datta/node_modules/next/dist/build/webpack/loaders/next-font-loader/postcss-next-font.js:105:44)
    at Object.Once (/home/shashank/FullStackProjects/shashank-datta/node_modules/next/dist/build/webpack/loaders/next-font-loader/postcss-next-font.js:124:31)
    at LazyResult.runOnRoot (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/home/shashank/FullStackProjects/shashank-datta/node_modules/postcss/lib/lazy-result.js:206:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Here is the code I have used:

import "./globals.css";
// import SidebarNav from "@/components/SidebarNav";
import localFont from "next/font/local";

const myFont = localFont({
  src: "../../public/fonts/NTR-Regular.ttf",
  weight: ["200"],
  display: "swap",
  style: "normal",
  preload: true,
  variable: "--NTR-Regular",
});

export const metadata = {
  title: "Shashank datta Bezgam Portfolio",
  description:
    "Welcome to Shashank Datta's Portfolio! Explore my projects showcasing web development, software engineering, and data analysis skills. Experience innovative solutions, attention to detail, and exceptional value. Let's connect and explore possibilities together.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/icon?family=Material+Icons"
        />
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </head>

      <body className={myFont.className}>
        {/* <SidebarNav /> */}
        {children}
      </body>
    </html>
  );
}

The font is stored in the Fonts directory under the Public folder:

Please suggest possible fixes to my issue!

[icyJoseph]

Mmm I think the weight as an array is the issue?

weight
The font weight with the following possibilities:

A string with possible values of the weights available for the specific font or a range of values if it's a variable font
An array of weight values if the font is not a variable google font. It applies to next/font/google only.
Used in next/font/google and next/font/local

Required if the font being used is not variable

It is a bit hard to read... but what if you just take "200" as a string?

[icyJoseph]

I looked at the source code, from there I knew, the problem had to be either style or weight. I think the types/documentation has to improve in this area. I was really hard to read the weight description.

[shashankdatta]

Could link me the specific file in the source code? I would like to learn how to analyze such error in the future.

[icyJoseph]

Oh my bad I thought I did. Here you go: https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/loaders/next-font-loader/postcss-next-font.ts#L131

[abdullahmehboob20s]

I also Solved it by removing an array.

before:
weight: ["300"]
after:
weight: "300"

I think there is a issue. If I am passing only one item in weight as array then it is throwing error. If passing one item without array it's not showing error.

[shashankdatta]

I also Solved it by removing an array.

before:

weight: ["300"]

after:

weight: "300"

I think there is a issue. If I am passing only one item in weight as array then it is throwing error. If passing one item without array it's not showing error.

Yeah, that issue kinda threw me off for a while. An array with one element should work the same as array either many.

[alireza-asgharii]

When using localfont, I noticed that I gave the weight value of the font as one number.
it's wrong.
The weight value must be a string

{ path: "../styles/fonts/YekanBakh-Light.woff2", weight: '100', style: "normal", }, { path: "../styles/fonts/YekanBakh-Regular.woff2", weight: '200', style: "normal", },