SyntaxError: Cannot use import statement outside a module

[darnfish]

Font Name (Geist Sans/Geist Mono):

• Geist Sans
• Geist Mono

Description of the Issue:

project_root/node_modules/geist/dist/font.js:1
import localFont from "@next/font/local";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Environment (please complete the following information):

• OS: macOS

Additional Context:
My package.json does not include type: module

[JohnPhamous]

@darnfish can you provide a Codesandbox/Replit/repo that repros the problem?

[washedlih]

have this issue as well

[ckrook]

Hello, me to!

[stijnelskens]

Bump, also having this issue

[ethndotsh]

me as well

[heyarviind]

getting same issue

[iamdevmarcos]

the same issue here

[aryanprince]

Apparently this error only shows up on pages router. Can someone vouch for this?

I built two new Nextjs 14 apps (app and pages), installed Geist font, and added GeistSans.classNames to _app.tsx and layout.tsx respectively. App router version works fine, pages router one shows the same 'Cannot use import statement outside a module' error.

Link to repos I tested this with: Pages Router (error) & App Router (all good).

Feel free to StackBlitz these since I couldn't get that to work.

[jacobdalamb]

Also couldn't get Geist package to work in Astro

[dieharders]

Same issue. Using "pages" router.

When using import { GeistSans, GeistMono } from 'geist/font' I get the SyntaxError same as OP.
However, when using import localFont from "next/font/local" and then manually downloading fonts into my project is the only way I can load this font without getting the error.

Next.js: v14.0.1
React: v18.2.0
Using PNPM package manager.

[eriksik2]

Also getting this error on nextjs v13.5.4 with pages router.

[carloscdante]

Also getting this error on Next 13.4.16 w/pages router

[AnimeAllstar]

Me too. Looks like they didn't bother testing it with the pages router.

[JonHMChan]

Also getting this error with pages

[benjypng]

Having this issue with pages router as well.

[enricoros]

Same - pages router, NextJS 13.4.19 (not updating to13.5/14 because of larger bundle sizes)

[spidgorny]

This is a fix that worked for me (next.config.js):

transpilePackages: ["geist"],

[kiltedDev]

This is a fix that worked for me (next.config.js):

transpilePackages: ["geist"],

This fixed it for me as well.

"next": "^13.5.4",
"react": "18.2.0",

using Bun as package manager for this one.

[darnfish]

This is a fix that worked for me (next.config.js):

transpilePackages: ["geist"],

Thanks @spidgorny! This worked for me. I had to also add font-sans to my root Tailwind component for the font to actually render, Geist docs makes this kind of difficult to figure out.

[VapidLinus]

@darnfish I don't think this issue should be closed.

It's great we found a workaround, but this is still an issue imo until they add this to the installation instructions on the website or the npm page.

[benjypng]

@darnfish I don't think this issue should be closed.

It's great we found a workaround, but this is still an issue imo until they add this to the installation instructions on the website or the npm page.

I think so too. It seems like the source of the issue has not been discovered yet.

[aryanprince]

I made a new issue (#59) with more information about this issue, check it out. Hopefully it gets resolved.

@VapidLinus @hkgnp

[troneras]

Try adding this line on the top of your fonts file

/// <reference types="geist/font/sans" />

Explanation: You may have in your tsconfig a rule to exclude node_modules, which means TypeScript will not check or include any files from the node_modules directory.

One solution could be to remove "node_modules" from the exclude array, but this might significantly slow down TypeScript, as it will start checking all files in node_modules.

A better solution is to add that triple slash directive on the top of the file. This directive will tell TypeScript to include that specific module in the compilation context. This way, TypeScript will include the geist/font module in the compilation context, even though node_modules is excluded in tsconfig.json.

If it doesn't work try restarting the ts server:

• Press Ctrl+Shift+P to open the command palette.
• Type "TypeScript: Restart TS server" and select it.