Type error: Cannot find module '@/app/ui/fonts' or its corresponding type declarations.

[ozee1z]

Summary

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.

Additional information

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 )

Example

https://vercel.com/schlinks-projects/nextjs-dashboard/A9ooANdwGFCA1nLFQ8ZHZC2tvZMe

[ananuness]

Hi! Could you show your app/ui/fonts folder and your tsconfig.json please?

[ananuness]

Oh, how are you using aliases without defining them in the tsconfig? 😳 I really thought we needed them to configure it. Oh, and I meant your ui/fonts folder structure ☺️

[ananuness]

But, if you want to map your path aliases, you can define a baseUrl, generally is the root folder and then you can set your path aliases like that:

As you can see in @/clientComponents I just set the path without * because it's a index file, but if not, you can generalize to call any file in your folders!

[ozee1z]

How do I define the tsconfig? I followed everything the tutorial said.

[ananuness]

Okay! So let's start defining the baseUrl and the paths in the tsconfig as you can see in my previous answer! You can define:

"baseUrl": ".", 
paths: {
  "@/app/*": ["app/*"]
}

And see if it works for you already!

[ozee1z]

It worked this was the only code I added to the tsconfig:
"baseUrl": "",
paths: {
"@/app/": ["app/*"]
}

Thanks Ana.

[ananuness]

You're welcome!! And as you can see in the image in the previous comment, you can add as many path aliases as you wish! Have a great day!

[Lutir]

I got the same error! Thanks Ana and Schlink! The fix worked for me

[ananuness]

I'm glad it helped you!!

[seanodotcom]

This fix worked for me. It should be mentioned in the official Vercel NextJS Tutorial | Chapter 6.

I found a fix after trying a few times and checking TS Docs, The baseUrl should be "./" to include all the folders/files in the same root as tsconfig.json which makes the file look like this:

{
  "compilerOptions": {
    ... //,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"]
    }
  },
 ... //
}

[milkion]

Thank you so much, it works!

[Oms-343]

If nothing works , do check the file name for the fonts.tsx you create . I missed 's' and everywhere i was importing the wrong filename.

[reflextoogood]

Dude I legit made the same mistake

[guillim]

can't believe i did the same shit 😆 . Thanks for pointing out

[ibrahim-sowunmi]

I ran into an error here because I skipped Chapter 3 folks!

[whenmoon]

Hahaha same but then did we do the Next JS tutorial to learn how to use some styles package? Nope

[Joachim92]

In my case I was getting this error because I decided to build the project before completing the first part of the tutorial. This file dashboard/final-example/app/ui/fonts.ts was missing and I now realize that it was intended to be created in a later stage in the tutorial.

[seyedahmaddv]

i have problem this problem so:

Failed to compile. -- 16:57:29.215 |   16:57:29.215 | ./app/ui/acme-logo.tsx:2:26 16:57:29.215 | Type error: Cannot find module '@/app/ui/fonts' or its corresponding type declarations. 16:57:29.216 |   16:57:29.216 | 1 \| import { GlobeAltIcon } from '@heroicons/react/24/outline'; 16:57:29.216 | > 2 \| import { lusitana } from '@/app/ui/fonts'; 16:57:29.216 | \| ^ 16:57:29.216 | 3 \| 16:57:29.216 | 4 \| export default function AcmeLogo() { 16:57:29.218 | 5 \| return ( 16:57:29.277 | Error: Command "npm run build" exited with 1 ------------------- But I noticed that the changes that I make in my code in Visual Studio or GitHub directly, are not given in the Versel code. delete yout project in vercel and then reinstall new project from corrected github files.

[romu70]

Many many thanks !!
I was going totally mad at looking at this issue. And as a newbie, my mind was upside down at knowing what to do.

So yes:

1. Fix the path
2. Delete the Vercel project
3. Import it again

[nidhinvs78]

You may need to install the package google fonts.
try this, and push the changes to github.
npm i next-google-fonts

[mongolsteppe]

Created a pull request to avoid future users running into this issue vercel/next-learn#674

[beckrecca]

It'd be great if someone approved this PR / edited Chapter 6 accordingly because when you install the linter in Chapter 14 (https://nextjs.org/learn/dashboard-app/improving-accessibility), it overwrites the tsconfig file and breaks routing completely until you re-apply this fix to that file.

[realtebo]

please fix example app project or, better, add a few lines to the documentations of learning project to help newbies to find and fix this error.

[wcilzo]

In next 14, you can see vercel/next-learn#580 (comment), I have solved the problem.😊

[HeadStone7]

Just create a file in '@/app/ui' name "fonts.ts" and then add:

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

[YuraniDanilo]

Hello guys, I found a solution to that problem:

If you're using windows, your system is identifying FONTS.TS as a video MPEG-2 not as a Typescript file. You must change it. If you look inside your Github project, you won't find FONTS.TS there. Because it's not importing because of this problem.

Open the properties of fonts.ts and put webstorm or vs code as default and then import it inside the Github repository. It will work.

[IsacFSC]

Ao tentar fazer deploy no vercel do meu projeto com nextjs, prisma e neon está dando erro mas não encontrei no meu código.

ERRO NO VERCEL ABAIXO:

1. ./src/app/admin/dashboard/page.tsx
2. 10:38 Error: React Hook "useAuth" is called in function "adminDashboardPage" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks