I recently started working with next.js and I'm following a project tutorial by a YouTuber. Here is the link to my code: https://github.com/Fanguiee/ticketing-app/tree/edit-existing-item or you can also read below. Thank you in advance :)
Screenshot: enter image description here Error in text:
⨯ app\TicketPage\[id]\page.jsx (30:40) @ foundTicket
⨯ TypeError: Cannot read properties of undefined (reading 'foundTicket')
at TicketPage (./app/TicketPage/[id]/page.jsx:35:45)
28 | } else {
29 | updateTicketData = await getTicketById(params.id);
> 30 | updateTicketData = updateTicketData.foundTicket;
| ^
31 | }
32 | return <TicketForm ticket={updateTicketData} />;
33 | };
app\TicketPage[id]\page.jsx:
import TicketForm from "@/app/(components)/TicketForm";
const getTicketById = async (id) => {
try {
const res = await fetch(`http://localhost:3000/api/Tickets/${id}`, {
method: "GET",
cache: "no-store",
});
if (!res.ok) {
throw new Error(`Failed to fetch Ticket by id ${id} .`);
}
console.log("Ah!");
console.log(res);
return res.json();
} catch (error) {
console.log(error);
}
};
const TicketPage = async ({ params }) => {
const EDITMODE = params.id === "new" ? false : true;
let updateTicketData = {};
if (!EDITMODE) {
updateTicketData = {
_id: "new",
};
} else {
updateTicketData = await getTicketById(params.id);
updateTicketData = updateTicketData.foundTicket;
}
return <TicketForm ticket={updateTicketData} />;
};
export default TicketPage;
app\api\Tickets[id]\route.js:
import TicketForm from "@/app/(components)/TicketForm";
const getTicketById = async (id) => {
try {
const res = await fetch(`http://localhost:3000/api/Tickets/${id}`, {
method: "GET",
cache: "no-store",
});
if (!res.ok) {
throw new Error(`Failed to fetch Ticket by id ${id} .`);
}
console.log("Ah!");
console.log(res);
return res.json();
} catch (error) {
console.log(error);
}
};
const TicketPage = async ({ params }) => {
const EDITMODE = params.id === "new" ? false : true;
let updateTicketData = {};
if (!EDITMODE) {
updateTicketData = {
_id: "new",
};
} else {
updateTicketData = await getTicketById(params.id);
updateTicketData = updateTicketData.foundTicket;
}
return <TicketForm ticket={updateTicketData} />;
};
export default TicketPage;
i am using node.js v18.16.0, and encountered an issue while updating it. Could this be the cause of the problem?
package.json:
{
"name": "ticketing-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
// Dependencies section
}
Prior to this, I was using next.js version 14.0.0 and then tried an older version after reading a post about a similar error. The package.json now shows next.js version as 13.0.8, though the actual version installed is Next.js v13.5.6. The YouTuber who created this project used "next": "13.4.13", should I switch to that version?
In an attempt to resolve the issue, I also tried npm install next@canary, but it didn't solve the problem.
i have:
const getTickets = async () => {
try {
const res = await fetch("http://localhost:3000/api/Tickets/", {
cache: "no-store",
});
return res.json();
} catch (error) {
console.log("Failed to get tickets.", error);
}
};
This function works perfectly fine, and I use it to display all the tickets. It's puzzling why the getTicketById() function is not functioning properly.