Vercel Deploy error (application created by v0)

[MickyCat789]

I created an app using V0.
The folder structure is as shown in the screenshot.

On my local PC, I ran the following command:
npx create-next-app@latest
This created the folder moneyeducation5.

I then moved into the moneyeducation5 folder and executed the following command:
npx shadcn@latest add "https://v0.dev/xxxxxxxxxxxxxxxxxxxxxxx"
(*xxxxxxxxxxxxxxxxxxxxxxx refers to the V0 codebase.)

After that, I ran:
npm run dev
Accessed http://localhost:3000 and confirmed that it worked correctly.

Next, I used GitHub Desktop to select moneyeducation5 as a local repository with the "Add local repository" option.
I deployed it to the remote repository.

On GitHub, the project name is moneyeducation, and its structure is shown in another screenshot.

I then logged into Vercel and imported the moneyeducation repository from GitHub.
For the Framework Preset, I selected Next.js, and for the Root Directory, I chose either ./ or moneyeducation5.

When I deployed it, I encountered the following error:
Command "npm run build" exited with 1

After trying various things, I also encountered the following error:

404: NOT_FOUND
Code: NOT_FOUND
ID: sin1::ntccb-1736758736861-f2928a235019

What could be the possible cause of these issues?

Additional information

No response

Example

No response

[icyJoseph]

When you say:

Root Directory, I chose either ./ or moneyeducation5

That sounds wrong, it should be moneyeducation5, as you have the Next.js project, nested within that folder.

You also only did npx next dev (or whichever variation) locally, but you have to also verify:

• next build && next start,
• or, if you use export mode, next build and your static server.

I'll take a look at the repository in your GitHub account to see if anything is wrong though.

[icyJoseph]

So, in this repository, https://github.com/MickyCat789/moneyeducation

There are two bad import statements, in:

• ./src/app/badges/page.tsx
• ./src/app/quiz/page.tsx

import { getBadges, getEarnedBadges, getPoints, getCurrentTitle } from '../rewardSystem'

But that module lives within components, two levels up, and then down into components.

import { addPoints, awardBadge } from '../../components/rewardSystem';

Sort of like that. Now, @/ is setup to be the root of the project, so you could do:

// ./src/app/badges/page.tsx
import { getBadges, getEarnedBadges, getPoints, getCurrentTitle } from '@/components/rewardSystem'

// ./src/app/quiz/page.tsx
import { addPoints, awardBadge } from '@/components/rewardSystem';

Once you fix that, you'll see that you have a TypeScript error with @types/canvas-confetti, or rather, lack of it. canvas-confetti doesn't seem to have any types, so you have to fix that. One way is to just install npm i --dev @types/canvas-confetti.

And that's it. After that I think it should build. Try locally first too, don't just wait until the deploy error. Make sure things work on your machine at least.

[MickyCat789]

Hi @icyJoseph
Thank you for sharing detail.

I modified the two page then installed the canvas-confetti.

Once running this command "npm run build && npm run start", the following message appeared in my screen.

What can I fix this issue? need to set some output folder?

---

C:\Users\akira\github\moneyeducation5>npm run build && npm run start

[email protected] build
next build

▲ Next.js 15.1.4

Creating an optimized production build ...
(node:12864) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
(node:15388) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
Error occurred prerendering page "/badges". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: localStorage is not defined
at l (C:\Users\akira\github\moneyeducation5.next\server\app\badges\page.js:1:5880)
at p (C:\Users\akira\github\moneyeducation5.next\server\app\badges\page.js:1:3150)
at nO (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:45959)
at nI (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:47734)
at nL (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:65533)
at nN (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:63164)
at n$ (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:46311)
at nI (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:47780)
at nI (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:62515)
at nL (C:\Users\akira\github\moneyeducation5\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:20:65533)
Export encountered an error on /badges/page: /badges, exiting the build.
⨯ Static worker exited with code: 1 and signal: null

[icyJoseph]

I see. You have a problem within badges and how it uses rewardSystem.

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Client components are still SSR'd, which means you cannot access client side APIs directly in the render pass. No window, no document, etc. In this case you are accessing local storage. I know you used use client, and probably misguided by tech-influencers, assumed that it only runs client side, but that's not the case.

You have to synchronize with local storage using useEffect or useLayoutEffect rather. Initialize to an empty state, and within the effect read the local storage to then set the initial state.

In general though, reading from the local storage as you render is also not good. Render passes have to be pure, and the store might change between renders.

[icyJoseph]

Look at this answer I gave two years ago: #49131 (reply in thread) - You can use that as a reference.

Please don't forget to mark as answered. The issues have been identified and there's a way forward that'll work.

[MickyCat789]

Thank you so much!
I resolved then could created this application!
I proceeded explicitly specified the type and set the initial state.