Can't resolve '@vercel/turbopack-next/internal/font/google/font' sporadically on next dev --turbo.

[lancejpollard]

Summary

Keep getting this sporadically when I start my server, then I have to try and try again to restart it, until it finally works.

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:51 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6030
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.10.0
Relevant Packages:
  next: 14.1.1-canary.46 // Latest available version is detected (14.1.1-canary.46).
  eslint-config-next: 13.1.5
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Example

No response

[Sayakie]

I faced same issue and resolved by installing latest version issued: pnpm add next@latest

[hasemon]

this works

[Sarawutchaiwong]

thanksXD

[mohamed-elhaissan]

what about npm ?

[calmliming]

thanks

[mohamed-hassaan3]

working well, thanks!

[ghost]

I am also experiencing the same issue with the error message: Module not found: Can't resolve '@vercel/turbopack-next/internal/font/google/font'. I have already updated all packages to the latest versions. Does anyone know how to resolve this? Thank you!

[shashicode]

I am still facing the same issue, tried reinstalling and adding the latest next, but nothing works, Has anyone found a fix yet?
these are building blocks of an application why this does not work :(

[niikkhilsharma]

Faced the same issue, I tried restarting the server and it worked for me.

[rsignavong]

I have the issue. How can I fix it?

[Nonellia]

Hey, did you solve it?

[devmev10]

Faced the same out of nowhere.
installing nextjs latest version and restarting vscode worked

npm install next@latest

[thiagocam-marleyspoon]

Thanks for the hint, I had a local proxy enabled and it worked after disabling it

[kanta1207]

Disconnecting the VPN made it work for me too. Thanks!

[hummxt]

Thanks dude.

[Gibson-Joseph]

Thanks @shalomspage

[WhiteSnowGirl]

thanks bro

[yusupsupriyadi]

I'm experiencing the same issue, but I temporarily turned off the turbopack feature when running the application on the deployment side by removing --turbopack in package.json

[hczs]

thanks!! It worked for me!!!

[mathanprasannakumar]

Thanks , it worked. Can any one know why such issue is happening , any leads would be welcomed.

[Kamaruddheen]

Thanks man. It worked

[ozgeonline]

Installing the latest versions may not solve the problem. Following the next.js documentation seems to have solved the problem for now.
https://nextjs.org/docs/messages/built-in-next-font
npx @next/codemod built-in-next-font .
I install it and it worked for me

[quyettranvu]

I tried that command but still not resolved, it kept showing sporadically even my tries seem to be very strict.

[quyettranvu]

I'm experiencing the same issue, I really love the behind architecture how Turbopack built but I really got mad because of this building error. Does anyone have any other suggestions? Thanks in advance!

[quyettranvu]

I hope that the developer team of Turbopack will check this soon

[sridhar2193]

I just removed --turbopack in next dev scripts in package.json. Now it is working. But need to debug why it is failing with turbopack

[daribock]

This solved the problem for me too. 🚀

[qyl27]

Same issue, can be reproduced in next 15.2.0

[HenryOoO]

The same problem was solved by restarting the server

[stevenho0811]

delete node_modules folder, and reinstall, and delete .next folder solve my problem. and if you still facing same problem, try another network environment, and do it again.

[kybaloo]

It's the use of Turbopack, Adding this to next.config.js solved it for me:

const nextConfig = {
  experimental: {
    turbopack: false, // Désactive Turbopack
  },
};

module.exports = nextConfig;

[ukalpa]

Yeah, it seems to be related to Turbo, and the Google font Inter is used in the sample Turbo code.

If you don't want to remove --turbo, you can simply search for import { Inter } from "next/font/google"; in your repository and delete the related code. That should resolve the issue.

https://github.com/vercel/turborepo/blob/main/examples/with-tailwind/apps/web/app/layout.tsx

[Stanjae]

Yeah, it is related to Turbo, and the Google font Inter is used in the sample Turbo code.
Just restart your dev server, or you can temporarily turn off the turbopack feature when running the application on the dev by removing --turbopack in package.json

[luchillo17]

I installed it locally through npm though Idk if it opts me out from font optimizations: #77861 (comment)

[timneutkens]

Can you give next@canary a try to check if this is fixed already?

[andrebrito16]

I tried it now and got this error.

Also in my build always I got something like the image bellow. Maybe it's related to fonts as well.

[tranlap2412]

upgrade next "next": "^15.3.5" and remove --turbopack

[luchillo17]

Removing --turbopack would disable some performance no?
I would rather install the fonts from NPM directly.

[oOMrCookieOo]

https://stackoverflow.com/questions/79458011/turbopack-issue-with-nextjs15-in-windows

This error is often caused by corrupted native binaries. I fix it like this:

Clean npm cache

npm cache clean --force

Delete node_modules and .next

rm -rf node_modules .next

Reinstall dependencies

npm install

this seems to work for me as mention in link
even when i removed --turbopack it still bugged when i was trying to build but the cache clear did it

[nada-aldubaie2]

In fact, this solution is temporary. As soon as you reopen the vscode again, the problem often returns.

[oOMrCookieOo]

Sorry, that did not happen to me so i am not sure what else to do, Good luck tho!

[basicButtons]

I create the repo by 'npx create-next-app@latest', and I run 'npm run dev'. I get this error, but I fix this by doing the following things.

1. delete 'node_modules' and 'package-lock.json' files.
2. run 'pnpm i'
3. run 'npm run dev'

[basicButtons]

It seems that this is something wrong with next package'version, so reinstall the node_modules is very intuitive.

[tonyabracadabra]

Why the problem persist till now?

[stomayid]

By me it was solved by disabling the ad blocker and web filter (VPN).

[RiverCui]

thank u, it worked.

[Mo-Ali7375]

how I solved it:

1- Installed geist.

2- Modified my layout.tsx file like this:

  import type { Metadata } from "next";
  import { GeistSans } from "geist/font/sans";
  import { GeistMono } from "geist/font/mono";
  import "./globals.css";
  
  export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
  };
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body
          className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
        >
          {children}
        </body>
      </html>
    );
  }

I hope this helps you :)

[narendram224]

I got the same issue.
For me when I have added the this code in my .env.local it works.

For Next js 16.

NEXT_TURBOPACK_EXPERIMENTAL_USE_SYSTEM_TLS_CERTS=1

[0xmanny]

updating to next 15.5.6 worked for me

[YarosMallorca]

Adding turbopackUseSystemTlsCerts: true to nextConfig.config.ts fixed it for me.

[Hexi1997]

work for me

[juliocesaroliveira]

thank you, it worked.

[Ammar1999y]

For me, it only works when I enable a VPN before starting the server.

[YusufcanY]

That was the cause for me. Thanks

[afpro]

for latest next.js version, remove '--turbopack' already can't fix this bug, because next.js use turbopack as default.

explicit change '--turbopack' to '--webpack' fix this issue for me (for now).

[Smoke3785]

In my case, the issue was caused when I capitalized the file extension on one of my fonts. I had:

const h1FontFamily = localFont({
  src: [
    {
      path: "../assets/font/AgencyFB/AGENCYB.TTF",
      weight: "400",
      style: "normal",
    },
  ],
});

and it threw the above error. Changing my code to:

const h1FontFamily = localFont({
  src: [
    {
      path: "../assets/font/AgencyFB/AGENCYB.ttf",
      weight: "400",
      style: "normal",
    },
  ],
});

resolved the error and allowed me to import my font.

I also changed the file extension to lowercase, too.