SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
const ProfileEditPage = () => {
useEffect(() => {
fetch('/edit').then(response => response.json()).then(data => console.log(data)).catch(err => console.error(err));
}, [])
index.js (file)
import express from 'express';
import cors from 'cors';
app.use(cors());
const app = express();
const PORT = 5173;
app.listen(PORT, () => console.log(
Server is running on ${PORT}));
app.get('/edit', (req, res) => {
const users = [{
name: 'Anes',
age: 19,
},
{
name: 'Dion',
age: 17,
}
]
res.json(users);
})
export default app;
12 Replies
why i am getting this error , btw these two compoents are seperated
but i couldn't share them
the first one is profile editPage
and second one index.js
why i am getting this error?
it says error is in line 8 at ProfileEditPage
the row which i made the fetch request
you're looking in the wrong tab
check the network tab and see what the requests return
if i had to guess, its returning a 404 or 500
let me see
304?
I am getting this one
304
@ἔρως any ideas?
so what's happening, is that you're sending a fetch request to a URL, /edit in this case, and the server is responding with HTML rather than the expected JSON. That's either because you're using the wrong endpoint, or using the endpoint incorrectly, or there's something wrong on the server that's causing the server to respond with a HTML error page.
in the network tab, there will be a request to /edit somewhere, and that request will contain more information
you may have to reproduce the error with the network tab open though
YES I WENT there at network tab waited for my fetch request and then right click on them and went to response and got this
<!doctype html>
<html lang="en">
<head>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.vite_plugin_react_preamble_installed = true
</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx?t=1722850778869"></script>
</body>
This is my header:
Request URL:
http://localhost:5173/
Request Method:
GET
Status Code:
304 Not Modified
Remote Address:
[::1]:5173
Referrer Policy:
strict-origin-when-cross-origin
Access-Control-Allow-Origin:
*
Connection:
keep-alive
Date:
Mon, 05 Aug 2024 09:41:44 GMT
Keep-Alive:
timeout=5
Accept:
/
Accept-Encoding:
gzip, deflate, br, zstd
Accept-Language:
en-US,en
Connection:
keep-alive
Host:
localhost:5173
If-None-Match:
W/"2b2-+JHgkuWbSO9yOy/tjoMcM5OrvmY"
Referer:
http://localhost:5173/
Sec-Ch-Ua:
"Not/A)Brand";v="8", "Chromium";v="126", "Brave";v="126"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Windows"
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
same-origin
Sec-Gpc:
1
User-Agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
ah, you're serving your site from vite, and then have express running separately?
I think you're misunderstanding how that changes the URL. Vite will serve the site on one port, and express on another. What port are you seeing in the URL bar?
hmm, so I'm purely guessing on what you've shared so far, but I think you're running vite on the default port 5173 (so http://localhost:5173) and you've configured express to use the same port. I think you're assuming that they need to match, but they need to be different. Change this line in express:
to
then change the fetch line to
Okay will try that
Should not them be the same though?
No, they shouldn't
It's two servers, they need their own ports
you cant serve 2 services from the same port because only one service can use it at a time
if im not mistaken, you should have gotten a warning somewhere about it
no i did not bro
that is so strange
it should have failed because the port would be in use
@Jochem thanks bruv
it really worked
and now its workng the way excatly it should , you saved me so much time bro hahah