Next.js Discord

Discord Forum

@next/font warning message

Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Avatar
Schneider’s Smooth-fronted CaimanOP
I am on the latest version of Nextjs, when I run pnpm run dev I get this warning message:

⚠ Your project has @next/font installed as a dependency, please use the built-in next/font instead. The @next/font package will be removed in Next.js 14. You can migrate by running pnpm dlx @next/codemod@latest built-in-next-font .. Read more: https://nextjs.org/docs/messages/built-in-next-font

I tried pnpm dlx @next/codemod@latest built-in-next-font . but it's still giving the same warning

Any idea how to resolve it?
Answered by B33fb0n3
inside your IDE click inside your top bar (you are using vs code as well). Then enter the following:
%@next/font

Then press that icon (see attached). It will open in the side. Then add the following as replacement:
next/font

And click on the replace all button
Image
Image
Image
View full answer

15 Replies

Avatar
Schneider’s Smooth-fronted CaimanOP
@B33fb0n3 here is the post, thanks again!
here is the message in Terminal:

macOS@Mac-mini nextjs-tailwind % pnpm dlx @next/codemod@latest built-in-next-font . Executing command: jscodeshift --no-babel --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --transform /Users/macOS/Library/Caches/pnpm/dlx/di53ur3cuk2jk7kk5e76bul4p4/193d57c70c8-50a/node_modules/.pnpm/@next+codemod@15.1.0/node_modules/@next/codemod/transforms/built-in-next-font.js . Processing 29 files... Spawning 9 workers... Sending 4 files to free worker... Sending 4 files to free worker... Sending 4 files to free worker... Sending 4 files to free worker... Sending 4 files to free worker... Sending 4 files to free worker... Sending 4 files to free worker... Sending 1 files to free worker... All done. Results: 0 errors 29 unmodified 0 skipped 0 ok Time elapsed: 0.336seconds
Avatar
B33fb0n3
inside your IDE click inside your top bar (you are using vs code as well). Then enter the following:
%@next/font

Then press that icon (see attached). It will open in the side. Then add the following as replacement:
next/font

And click on the replace all button
Image
Image
Image
Answer
Avatar
Schneider’s Smooth-fronted CaimanOP
Thanks, so just to confirm, like this?
Image
@B33fb0n3 That fixed it, thanks! 🙂
Avatar
B33fb0n3
looks good for me. You may want to remove the entry inside your package.json completly
ah perfect. Sure thing
Avatar
Schneider’s Smooth-fronted CaimanOP
oh because I am using pnpm? or for another reason
Avatar
B33fb0n3
nah, the import changed (from '@next/font' to 'next/font'). And with the replacement we replaced the import everywhere inside your project
Avatar
Schneider’s Smooth-fronted CaimanOP
Hmmm, OK - I tested and it seems to work the same with or without next/font in package.json
I will just go ahead and remove if not needed anymore
Avatar
B33fb0n3
yea, it should work even if you have it still there. But it's not required anymore and it could cause errors when you try to do pnpm i. So remove it and you are good to go 👍
Avatar
Schneider’s Smooth-fronted CaimanOP
should I remove it from the pnpm-lock.yaml file too?
Image
Avatar
B33fb0n3
inside your pnpm-lock it will be removed automatically after your next pnpm i
Avatar
Schneider’s Smooth-fronted CaimanOP
ah I see, ty ty 🙂