SyntaxError: Cannot use import statement outside a module

[darnfish]

SyntaxError: Cannot use import statement outside a module

[spidgorny]

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

transpilePackages: ["geist"],

[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.

[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.

[washedlih]

have this issue as well

[AnimeAllstar]

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

[iamdevmarcos]

the same issue here

[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.

[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.

[ckrook]

Hello, me to!

[stijnelskens]

Bump, also having this issue

[heyarviind]

getting same issue

[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.

[ethndotsh]

me as well

[aryanprince]

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

@VapidLinus @hkgnp

[jacobdalamb]

Also couldn't get Geist package to work in Astro

[JohnPhamous]

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

[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

[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)

[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.