Build time error: export `next/font` localFont() instance as a constant

Question

As it mention in the doc: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#reusing-fonts

- Export it as a constant

// layout.tsx
export const pxGrotesk = localFont({
  src: [
    {
      path: "./px-grotesk-light.woff2",
      weight: "400",
      style: "normal",
    },
  ],
  preload: true,
  variable: "--font-px-grostesk",
  display: "swap",
});

export default ({ children }: { children: React.ReactNode }) => {
  return (
    <html
      lang="en"
      className={`${pxGrotesk.variable} antialiased`}
    >
      <body>
        {children}
      </body>
    </html>
  );
};

But when I use

// components/map-gl.tsx
import { pxGrotesk } from "@/app/layout";

import "mapbox-gl/dist/mapbox-gl.css";
import React from "react";
import Map from "react-map-gl";

export default ({ children }: { children: React.ReactNode }) => {
  return (
    <Map
      id="map"
      mapStyle={process.env.NEXT_PUBLIC_MAPBOX_STYLE_URL}
      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
      localFontFamily={pxGrotesk.style.fontFamily}
      ...
    />
  );
};

I got error when build:

Type error: Layout "src/app/layout.tsx" does not match the required types of a Next.js Layout.
  "pxGrotesk" is not a valid Layout export field.

Build time error: export `next/font` localFont() instance as a constant

0 Replies