Next.js Discord

Discord Forum

@next/font warning message

Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
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
View full answer

15 Replies

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
@Schneider’s Smooth-fronted Caiman 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?
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
Answer
Schneider’s Smooth-fronted CaimanOP
Thanks, so just to confirm, like this?
@B33fb0n3 That fixed it, thanks! 🙂
@Schneider’s Smooth-fronted Caiman Thanks, so just to confirm, like this?
B33fb0n3
looks good for me. You may want to remove the entry inside your package.json completly
@B33fb0n3 looks good for me. You may want to remove the entry inside your package.json completly
Schneider’s Smooth-fronted CaimanOP
oh because I am using pnpm? or for another reason
@Schneider’s Smooth-fronted Caiman oh because I am using pnpm? or for another reason
B33fb0n3
nah, the import changed (from '@next/font' to 'next/font'). And with the replacement we replaced the import everywhere inside your project
@B33fb0n3 nah, the import changed (from '@next/font' to 'next/font'). And with the replacement we replaced the import everywhere inside your project
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
@Schneider’s Smooth-fronted Caiman I will just go ahead and remove if not needed anymore
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 👍
@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 👍
Schneider’s Smooth-fronted CaimanOP
should I remove it from the pnpm-lock.yaml file too?
B33fb0n3
inside your pnpm-lock it will be removed automatically after your next pnpm i
Schneider’s Smooth-fronted CaimanOP
ah I see, ty ty 🙂