Vercel Build error
Answered
Forest yellowjacket posted this in #help-forum
Forest yellowjacketOP
Build Error
Failed to compile.
app/contacts/[email]/Edit/page.tsx
Type error: Page "app/contacts/[email]/Edit/page.tsx" has an invalid "default" export:
Type "ContactPageProps" is not valid.
Error: Command "npm run build" exited with 1
Summary
here is a link to a stackoverflow post i found.. it suggests that I have a syntax error, however being new to vercel, typescript, and react i'm unsure of how to implement this potential solution.
I normally use a.i to debug but it seems useless here.
this is the link to my file that is not working (I suspect all of my page.tsx have the same issue but this one simply comes up first in the build process)
https://github.com/reixyz22/Contact-Editor-Next/blob/master/app/contacts/%5Bemail%5D/Edit/page.tsx
Extra credit: are there any other potential build issues forseen?
Steps to Reproduce
I attempt to build a deployment with the code found at https://github.com/reixyz22/Contact-Editor-Next/
The website works well on my local host.
https://github.com/orgs/vercel/discussions/7388
Failed to compile.
app/contacts/[email]/Edit/page.tsx
Type error: Page "app/contacts/[email]/Edit/page.tsx" has an invalid "default" export:
Type "ContactPageProps" is not valid.
Error: Command "npm run build" exited with 1
Summary
here is a link to a stackoverflow post i found.. it suggests that I have a syntax error, however being new to vercel, typescript, and react i'm unsure of how to implement this potential solution.
I normally use a.i to debug but it seems useless here.
this is the link to my file that is not working (I suspect all of my page.tsx have the same issue but this one simply comes up first in the build process)
https://github.com/reixyz22/Contact-Editor-Next/blob/master/app/contacts/%5Bemail%5D/Edit/page.tsx
Extra credit: are there any other potential build issues forseen?
Steps to Reproduce
I attempt to build a deployment with the code found at https://github.com/reixyz22/Contact-Editor-Next/
The website works well on my local host.
https://github.com/orgs/vercel/discussions/7388
18 Replies
@Forest yellowjacket Build Error
Failed to compile.
app/contacts/[email]/Edit/page.tsx
Type error: Page "app/contacts/[email]/Edit/page.tsx" has an invalid "default" export:
Type "ContactPageProps" is not valid.
Error: Command "npm run build" exited with 1
Summary
here is a link to a stackoverflow post i found.. it suggests that I have a syntax error, however being new to vercel, typescript, and react i'm unsure of how to implement this potential solution.
I normally use a.i to debug but it seems useless here.
this is the link to my file that is not working (I suspect all of my page.tsx have the same issue but this one simply comes up first in the build process)
https://github.com/reixyz22/Contact-Editor-Next/blob/master/app/contacts/%5Bemail%5D/Edit/page.tsx
Extra credit: are there any other potential build issues forseen?
Steps to Reproduce
I attempt to build a deployment with the code found at https://github.com/reixyz22/Contact-Editor-Next/
The website works well on my local host.
https://github.com/orgs/vercel/discussions/7388
pages (page.tsx files) must export a component with only specific props.
see https://nextjs.org/docs/app/api-reference/file-conventions/page#props
{ emailProp, editProp } is invalid. it must be { params, searchParams }.see https://nextjs.org/docs/app/api-reference/file-conventions/page#props
@joulev pages (page.tsx files) must export a component with only specific props. `{ emailProp, editProp }` is invalid. it must be `{ params, searchParams }`.
see <https://nextjs.org/docs/app/api-reference/file-conventions/page#props>
Forest yellowjacketOP
how do i pass the right things to it then?
if i just say const EditPage: React.FC<ContactPageProps> = ({ params, searchParams }) i get 6 errors
@Forest yellowjacket if i just say const EditPage: React.FC<ContactPageProps> = ({ params, searchParams }) i get 6 errors
yes because you are using the page incorrectly. you are not supposed to import pages to other pages.
Forest yellowjacketOP
isn't that how dynamic routing is meant to work :(
everything works on my local host
i suggest you re-read the app router's routing system: https://nextjs.org/docs/app/building-your-application/routing.
@Forest yellowjacket everything works on my local host
it doesn't. try going to
http://localhost:3000/contacts/hello@world.com/Edit@joulev it doesn't. try going to `http://localhost:3000/contacts/hello@world.com/Edit`
Forest yellowjacketOP
well hello@world.com doesn't exist in the database and it's lowercase e
but http://localhost:3000/contacts/Paul@apple.net/edit does work
and without edit it works too as seen above, and actually displays the info. Also, all my API things work fine when typed in as a URL.
http://localhost:3000/contacts/Paul@apple.net/edit just happens to have hide set to to true so it renders a blank page
idk if i'm using it 'the right way' but the way i was using it 100% worked on local
@joulev i suggest you re-read the app router's routing system: <https://nextjs.org/docs/app/building-your-application/routing>.
Forest yellowjacketOP
I reviewed this page but i'm not sure what to take from it
specfically
my localhost 100% does work, though
@joulev it doesn't. try going to `http://localhost:3000/contacts/hello@world.com/Edit`
Forest yellowjacketOP
Answer