Hi,
I'm working through the masterclass and following the instructions of lesson 6 to a T, but the app was crashing when I tried to access the Ticket page.
So I changed the 'tickets' name in the db.json file to 'ticketData' just to remove any chance that wires were getting crossed, and when I access localhost:3000/ticketData through json-server, I see the data. However, when I run the app and try, I get a 404 page.
When I navigate to /tickets, I get an error
which I have spent the last few hours googling solutions (header info in the fetch call, try/catch, moving the _data dir to the public dir) - none of them worked, so I returned to the original state of the code from the lesson to post this issue.
`async function getTickets() {
const res = await fetch('http://localhost:3000/ticketData', {
next: {
revalidate: 0 // use 0 to opt out of using cache
}
})
console.log(res)
return res.json()
}
export default async function TicketList() {
const tickets = await getTickets()
return (
<>
{tickets.map((ticket) => (
<div key={ticket.id} className="card my-5">
<h3>{ticket.title}</h3>
<p>{ticket.body.slice(0, 200)}...</p>
<div className={`pill ${ticket.priority}`}>
{ticket.priority} priority
</div>
</div>
))}
{tickets.length === 0 && (
<p className="text-center">There are no open tickets, yay!</p>
)}
</>
)
}`
I printed the response object:
Response { [Symbol(realm)]: null, [Symbol(state)]: { aborted: false, rangeRequested: false, timingAllowPassed: true, requestIncludesCredentials: true, type: 'default', status: 404, timingInfo: { startTime: 161106.12160000205, redirectStartTime: 0, redirectEndTime: 0, postRedirectStartTime: 161106.12160000205, finalServiceWorkerStartTime: 0, finalNetworkResponseStartTime: 0, finalNetworkRequestStartTime: 0, endTime: 0, encodedBodySize: 10, decodedBodySize: 0, finalConnectionTimingInfo: null }, cacheState: '', statusText: 'Not Found', headersList: HeadersList { cookies: null, [Symbol(headers map)]: [Map], [Symbol(headers map sorted)]: null }, urlList: [ [URL] ], body: { stream: undefined, length: undefined, source: undefined } }, [Symbol(headers)]: HeadersList { cookies: null, [Symbol(headers map)]: Map(9) { 'cache-control' => [Object], 'vary' => [Object], 'x-powered-by' => [Object], 'content-type' => [Object], 'content-encoding' => [Object], 'date' => [Object], 'connection' => [Object], 'keep-alive' => [Object], 'transfer-encoding' => [Object] }, [Symbol(headers map sorted)]: null } } ⨯ SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
But at this point I am at a complete loss, since I followed the tutorial exactly and somehow broke everything. Any insight would be greatly appreciated.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent