How to solve modules not found in NEXT JS 14?

Question

Vercel error message

Modules not found issues in NEXT JS 14 with vercel deployment

I tried to host NEXT JS project on vercel with github repo. I followed the tutorials from NEXT JS official sites but seeing this error message. ( Type error: Cannot find module '@/app/ui/fonts' or its corresponding type declarations.

  1 | import { GlobeAltIcon } from '@heroicons/react/24/outline';
> 2 | import { lusitana } from '@/app/ui/fonts';
    |                          ^
  3 |
  4 | export default function AcmeLogo() {
  5 |   return (
Error: Command "npm run build" exited with 1 )

What packages do I still need to install?

Answer 1

there is no file named fonts in the given path ('@/app/ui/fonts')...

add fonts.ts in this directory and paste below code:

import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({
                   weight: ['400', '700'],
                   subsets: ['latin'],
                   });

and of course at the moment another issue in the source code is about the global.css which is not imported in layout.tsx file; so add the below to this file:

import '@/app/ui/global.css';

Answer 2

I founed the fix here. in nextjs 14, you have to define the subset to the font.

import { Inter, Lusitana } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({ weight:'400' ,subsets: ['latin'] 
});

now you can deploy to vercel. thanks to Dorians Developer. I follow from his channel on youtube.