show the issue pls

bro so many issues its so hard when there isnt someone there to help you. like admin for example. by the time someone replies the issue is completely different.
because i got past the old issue for example.

now my build is loading locally but never deploys on vercel

these are the errors

Failed to compile.
./app/ui/acme-logo.tsx:2:26
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 (
Static worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

i have started again like 20 times now. so annoying 😦

Can you share your file structure

There could be a case sensitive issue

├── README.md
├── app
│ ├── dashboard
│ │ ├── customers
│ │ │ └── page.tsx
│ │ ├── invoices
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── layout.tsx
│ ├── lib
│ │ ├── data.ts
│ │ ├── definitions.ts
│ │ ├── placeholder-data.ts
│ │ └── utils.ts
│ ├── page.tsx
│ ├── query
│ │ └── route.ts
│ ├── seed
│ │ └── route.ts
│ └── ui
│ ├── acme-logo.tsx
│ ├── button.tsx
│ ├── customers
│ │ └── table.tsx
│ ├── dashboard
│ │ ├── cards.tsx
│ │ ├── latest-invoices.tsx
│ │ ├── nav-links.tsx
│ │ ├── revenue-chart.tsx
│ │ └── sidenav.tsx
│ ├── fonts.ts
│ ├── global.css
│ ├── home.module.css
│ ├── invoices
│ │ ├── breadcrumbs.tsx
│ │ ├── buttons.tsx
│ │ ├── create-form.tsx
│ │ ├── edit-form.tsx
│ │ ├── pagination.tsx
│ │ ├── status.tsx
│ │ └── table.tsx
│ ├── login-form.tsx
│ ├── search.tsx
│ └── skeletons.tsx
├── next-env.d.ts
├── next.config.ts

├── node_modules
│ ├── @heroicons
│ │ └── react -> ../.pnpm/@heroicons+react@2.2.0_react@19.0.0/node_modules/@heroicons/react
│ ├── @tailwindcss
│ │ └── forms -> ../.pnpm/@tailwindcss+forms@0.5.10_tailwindcss@3.4.17/node_modules/@tailwindcss/forms
│ ├── @types
│ │ ├── bcrypt -> ../.pnpm/@types+bcrypt@5.0.2/node_modules/@types/bcrypt
│ │ ├── node -> ../.pnpm/@types+node@22.10.7/node_modules/@types/node
│ │ ├── react -> ../.pnpm/@types+react@19.0.7/nodemodules/@types/react
│ │ └── react-dom -> ../.pnpm/@types+react-dom@19.0.3@types+react@19.0.7/node_modules/@types/react-dom
│ ├── autoprefixer -> .pnpm/autoprefixer@10.4.20_postcss@8.5.1/node_modules/autoprefixer
│ ├── bcrypt -> .pnpm/bcrypt@5.1.1/node_modules/bcrypt
│ ├── clsx -> .pnpm/clsx@2.1.1/node_modules/clsx
│ ├── next -> .pnpm/next@15.1.6_react-dom@19.0.0_react@19.0.0react@19.0.0/node_modules/next
│ ├── next-auth -> .pnpm/next-auth@5.0.0-beta.25_next@15.1.6_react-dom@19.0.0_react@19.0.0react@19.0.0__react@19.0.0/node_modules/next-auth
│ ├── postcss -> .pnpm/postcss@8.5.1/node_modules/postcss
│ ├── postgres -> .pnpm/postgres@3.4.5/node_modules/postgres
│ ├── react -> .pnpm/react@19.0.0/node_modules/react
│ ├── react-dom -> .pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom
│ ├── tailwindcss -> .pnpm/tailwindcss@3.4.17/node_modules/tailwindcss
│ ├── typescript -> .pnpm/typescript@5.7.3/node_modules/typescript
│ ├── use-debounce -> .pnpm/use-debounce@10.0.4_react@19.0.0/node_modules/use-debounce
│ └── zod -> .pnpm/zod@3.24.1/node_modules/zod
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
│ ├── customers
│ │ ├── amy-burns.png
│ │ ├── balazs-orban.png
│ │ ├── delba-de-oliveira.png
│ │ ├── evil-rabbit.png
│ │ ├── lee-robinson.png
│ │ └── michael-novotny.png
│ ├── favicon.ico
│ ├── hero-desktop.png
│ ├── hero-mobile.png
│ └── opengraph-image.png
├── tailwind.config.ts
└── tsconfig.json

did you guys have similar issues? it must be an issue on my side.

can you share your screen somehow

damn, worst side of this job ig like a mechanic in car repair, i should see it definitely 🙂. I like reading logs

this is my issue. no matter how many times i start again and again. i get to step 6 and the website doesnt deploy on vercel. im not sure why i follow the instructions precisely. i think maybe i have conflicting files or downloads from old projects i am working on im not to sure.

this is my current screen on vercel

because im so used to just asking ai to fix my issues. as a beginer coder i have no experience working with like smaller instructions for example with next.js. i know its for people with experience but the only way to get experience is hands on for me

a suggestion from friend: never use ai as beginner. i used it for a project which i dont know anything, and it generated me tons of redundant code which dont even work properly

share your fonts.ts

+1

import { Inter, Lusitana } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

export const lusitana = Lusitana({
weight: ['400', '700'],
subsets: ['latin'],
});

i agree. because it feels like your a pro coder until its time to code yourself 😂

yea its just making things faster and more error prone ig

looks like your problem is not your fonts btw

Can you try @/ui/fonts as import path, I don't think it should work, but I'm unsure what else could solve this issue

just remove that file and cut contents into root-layout file

That is a alternate solution, but doesn't solve the isssue

How are you deploying the app, like via github

ok so instead of this . do you guys know how i can like reset everything so theres no trace of any old files or installs ect ?

and yes new repo on github and then deploying via vercel. the @ui/fonts didnt work

also can you share that app/ui/acme-logo file

import { GlobeAltIcon } from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';

export default function AcmeLogo() {
return (
<div
className={${lusitana.className} flex flex-row items-center leading-none text-white}
>
<GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
<p className="text-[44px]">Acme</p>
</div>
);
}

'''import { GlobeAltIcon } from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';

export default function AcmeLogo() {
return (
<div
className={${lusitana.className} flex flex-row items-center leading-none text-white}
>
<GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
<p className="text-[44px]">Acme</p>
</div>
);
}
'''

import { lusitana } from '@/app/ui/fonts'; what it shows when you write @/ at there

btw i meant share screen as live

no i dont know how to share screen? do u know how?

and this is what message i get when i run the build locally

archiecope@archies-MacBook-Pro nextjs-dashboard % pnpm run build

@ build /Users/archiecope/nextjs-dashboard
next build

▲ Next.js 15.1.6
- Environments: .env

Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (9/9)
✓ Collecting build traces
✓ Finalizing page optimization

Route (app) Size First Load JS
┌ ○ / 5.49 kB 114 kB
├ ○ /_not-found 977 B 106 kB
├ ○ /dashboard 146 B 105 kB
├ ○ /dashboard/customers 146 B 105 kB
├ ○ /dashboard/invoices 146 B 105 kB
├ ƒ /query 146 B 105 kB
└ ƒ /seed 146 B 105 kB
+ First Load JS shared by all 105 kB
├ chunks/59-28f7826bb891b4e3.js 50.5 kB
├ chunks/aec749e8-ff8989dc528ab614.js 52.9 kB
└ other shared chunks (total) 1.92 kB


○ (Static) prerendered as static content
ƒ (Dynamic) server-rendered on demand

archiecope@archies-MacBook-Pro nextjs-dashboard %

this means it builds right? so the problem must be like the link between github/vercel? im not sure.

do you have teamviewer, or maybe vscode live share link at least

hopefully this works

i will be in gym now for maybe 30 minutes i just finished work. hopefully you guys have some time afterwards to go through it i didnt realise we could share, terminals also which is good.

i will message here when i am back but in the mean time if you see anything i started a shared terminal just incase you do like spot any error.

the problem is you cant find the file. so it's probably your routing. note that the suggestion was to try

@/ui/fonts

but you said

@ui/fonts didnt work

you know @/ui is different than @ui right?

its built

@ is a shortcut you can set in nextjs to refer to a specific folder. people here are trying to help you figure out which folder you have the shortcut "@" set to so you can find the path to your font file from there

Ping me when you're free, I might be able to assist you

in your jsconfig or tsconfig file, there should be an option called "paths". copy paste that here along with your file structure to your fonts file and it should be easy from there

something like

"paths": {
   "@/*": ["./*"]
}

me too, cuz says session timed out

the green color of file name along with U at the end means you didn't push this file to git(hub/lab), you need to push it first for vercel to pick it up

If it builds locally but doesn’t build in vercel

This is a file naming case sensitivity issue

Delete the file. Commit it to git.

Then recreate the file. Commit it to git.

Then deploy

If you look at GitHub I bet that icons file has an upper case letter in it

But on your file system it doesn’t

i think it's a problem with his @ path config because in the screenshot, his acme-logo.tsx was found from a relative path "./app/ui/acme-logo.tsx" but errors on the @ in the next line and he said ai wrote this, so it might have assumed an existing folder structure, so the config file might not be set up

No, its not pushed to github actually. @/app/ui/fonts.ts Is correct I guess

ok so i have alot of green files so they are not pushed to git so that explains why it builds locally.
fonts ts is in app/ui/fonts.ts

but can you guys explain how to push the other files to git?

my 'paths' is


"paths": {
"@/": ["./"]


but maybe if i do push all the greeen files to git that may be the issue ?

ok so i still get this error on vercel

Failed to compile.
./app/ui/acme-logo.tsx:2:26
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 (
Static worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

shall i change it to '@/app/ui/fonts.ts'?

its currently

'@/app/ui/fonts'

i also checked this but it isnt uppercase

so do you mean delete the file from git, then re add it or

delete fonts.ts and re add that and then recommit it ?

i deleted and re added the file but still get the same error

shall i try to change the path to

"paths": {
"@": ["./"]

so i changed the paths to the above and it still gives the exact same error. i also changed the path in acme to match but still same error? do i clear the cache or somthing ?

why not try this exactly?

these are all different:
"@"
"@/"
"@/*"

you can also try removing the @ alias entirely and jsut manually give it a relative path from your current file to bypass this whole issue for now

@Archie👑 I've already mentioned, you've not pushed your files to github.
run

git commit -am "some message"
git push origin main

i have pushed everything to git now but it still doesnt work.

i will try all of the three above.

so just to be clear i want to make three attempts to change

"paths": {
"@": ["./"]

"paths": {
"@/": ["./"]

"paths": {
"@/*": ["./"]

right ? and adjust in acme tsx

will give them a try

when i change the paths the text in the other files goes red. has no effect on the build atm 😦 , how can i remove the @ entirely.? i will check the link.

changed my acme tsx too

'''import { GlobeAltIcon } from '@heroicons/react/24/outline';
import { lusitana } from app/ui/fonts

export default function AcmeLogo() {
return (
<div
className={${lusitana.className} flex flex-row items-center leading-none text-white}
>
<GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
<p className="text-[44px]">Acme</p>
</div>
);
}
'''

added the image of my tsconfig. im sure i aplplied the paths in the correct section like they asked.

still gives me the exact same error on vercel build.

im just going to start everything again. ill try a different code writer, any advice ??

ok so now i am passed this finally

but i have another issue

https://nextjs.org/learn/dashboard-app/setting-up-your-database

i am on the last part where i had to 'uncomment the file"

but when i remove im left with

'''import postgres from 'postgres';

const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });

async function listInvoices() {
const data = await sql`

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;
}

return data;

'''


so im not sure if i removed too much from the file

console logs are


✓ Compiled /query in 91ms
'''''' ⨯ ./app/query/route.ts:17:1
Parsing ecmascript source code failed
15 | }
16 |
17 |
| ^

Unexpected eof


✓ Compiled /_error in 396ms
GET /query 500 in 543ms''''''

Can you share that file in codeblocks?