Closed darnfish closed 11 months ago
@darnfish can you provide a Codesandbox/Replit/repo that repros the problem?
have this issue as well
Hello, me to!
Bump, also having this issue
me as well
getting same issue
the same issue here
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.
Also couldn't get Geist package to work in Astro
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.
Also getting this error on nextjs v13.5.4 with pages router.
Also getting this error on Next 13.4.16 w/pages router
Me too. Looks like they didn't bother testing it with the pages router.
Also getting this error with pages
Having this issue with pages router as well.
Same - pages router, NextJS 13.4.19 (not updating to13.5/14 because of larger bundle sizes)
This is a fix that worked for me (next.config.js
):
transpilePackages: ["geist"],
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.
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.
@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.
@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.
I made a new issue (#59) with more information about this issue, check it out. Hopefully it gets resolved.
@VapidLinus @hkgnp
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:
Font Name (Geist Sans/Geist Mono):
Description of the Issue:
Environment (please complete the following information):
Additional Context: My
package.json
does not includetype: module