Next 13: Error After Import Geist Font -> SyntaxError: Cannot use import statement outside a module

[iamdevmarcos]

Font Name (Geist Sans/Geist Mono):

• [x] Geist Sans
• [x] Geist Mono

Description of the Issue: A compilation error occurred after installing and importing the Geist font.

Steps to Reproduce:

1. Install Geist font, using npm i geist
2. Import GeistSans or GeistMono in the top level at _app.tsx
3. Use GeistSans.className at <main className="GeistSans.className" />

Screenshots:

Error:

My _app.tsx file.

Environment (please complete the following information):

• OS: [MacOS]
• Version of the Font: [1.0.0]

Additional Information

• Next.js Version: [13.1.1]
• React Version: [18.2.0]

[Ethaan]

FYI i noticed the same, but to get this font working i used the localFont like

const geist = localFont({
  src: [
    { path: "../public/fonts/Geist/Geist-Regular.otf", weight: "500" },
    { path: "../public/fonts/Geist/Geist-Medium.otf", weight: "600" },
    { path: "../public/fonts/Geist/Geist-SemiBold.otf", weight: "700" },
    { path: "../public/fonts/Geist/Geist-Bold.otf", weight: "800" },
    { path: "../public/fonts/Geist/Geist-Black.otf", weight: "900" },
  ],
  display: "swap",
  variable: "--font-geist-sans",
  fallback: ["inter"],
});

For those using TailwindCSS

Extend the theme

extend: {
 fontFamily: {
   sans: ['var(--font-geist-sans)'],
 },
}

Then use it

<div className={cn(geist.variable, "font-sans")}>

[JohnPhamous]

Thank for you trying out the font and reporting this. Closing this issue as this is a dupe of #13. We will fix this!