Vercel build failing (noob building first real app please have mercy 🙏)

[reixyz22]

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.

[versecafe]

@reixyz22

const EditPage: React.FC<ContactPageProps> = ({ emailProp, editProp }) => {
    const params = useParams();
    const email = emailProp || decodeURIComponent(params.email as string);
    const dispatch = useDispatch();

    // State to manage the form inputs
    const [newName, setNewName] = useState<string>('');
    const [newEmail, setNewEmail] = useState<string>('');
    const [newPhone, setNewPhone] = useState<string>('');

    const handleSave = async () => {

        let updateUrl = `/api/contacts/${email}/edit`; //edit contact API

        if (email === "new"){ //add new contact API
                updateUrl = `/api/contacts/add`;
        }
        const dataToSend = {
                name: newName,
                email: newEmail,
                phone: newPhone,
        };
        const response = await fetch(updateUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(dataToSend),
        });

        if (response.ok) {
                const updatedContactData: Contact = await response.json();
                console.log('Contact updated successfully');
                dispatch(toggleHide(email)); //hide the edit interface
        } else {
                const errorData = await response.json();
                console.error('Failed to update contact:', errorData.error);
        }
        if (email === "new" && response.ok){ //fix the display, so we can show your newly added contact right away
                dispatch(clearEmail("new"));
                dispatch(setEmail(newEmail));
        }
    };

    if (!editProp) return <div/>; // Return nothing if edit mode is off

    return (
        <div>
            <h1 style={{color: 'darkred'}}>{email}</h1>
            <input
                type="text"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                placeholder="Enter new name"
                style={{display: 'block', margin: '10px 0'}}
            />
            <input
                type="email"
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
                placeholder="Enter new email"
                style={{display: 'block', margin: '10px 0'}}
            />
            <input
                type="text"
                value={newPhone}
                onChange={(e) => setNewPhone(e.target.value)}
                placeholder="Enter new phone"
                style={{display: 'block', margin: '10px 0'}}
            />
            <button onClick={handleSave}>💾 Save</button>
            <button onClick={() => dispatch(toggleHide(email))}>🔙 Back</button>
        </div>
    );
};

export default EditPage;

You are trying to pass in props that won't work your default export can only take in

interface RouteProps {
  params: {
    email: string;
  };
}

Also would recommend using

export default function NamePage({
  params,
}: RouteProps): JSX.Element {
  return(
    // ....
  );
}

[reixyz22]

I think to make this functional, I would need to convert more than 5 of my page.tsx's to components.
Which, seems crazy complicated.
As they currently rely on the props they do receive. Although perhaps props is a misnomer of sorts.
Since my app works perfectly on my localhost.. I might do pursue the route of making a docker image rather than host on Vercel. However, your notes are interesting, maybe I need to learn more about what next expects.

[versecafe]

remember you can always pass data into a component inside the page itself not all state needs to be stored in the URL params, and it is server rendered by default so if you don't have a "use client" you can do direct async data fetching with a DB or external API extremely easily

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community