Mern Stack React Application - mern

Question

Back-End =>
require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
mongoose.set('strictQuery', false);
const workoutRoutes = require('./routes/workouts');
//express app
const app = express();
//middlewear
app.use(express.urlencoded({ extended: true }))
app.use(express.json());
app.use((req, res, next) => {
console.log(req.path, req.method);
next();
});
//routes
app.use('/api/workouts',workoutRoutes);
//Connect To Database
mongoose.connect(process.env.MONGO_URI)
.then(() => {
//Listen For Requests
app.listen(process.env.PORT, () => {
console.log(`Connected To MongoDB && Listening On Port http://localhost:${process.env.PORT}`);
});
})
.catch((error) => {
console.log(error);
});
Front-End =>
import React, {useState, useEffect} from 'react'
const Home = () => {
const [workouts, setWorkouts] = useState(null);
useEffect(() => {
const fetchWorkouts = async () => {
const response = await fetch('http://localhost:3001/api/workouts');
console.log(response);
const json = await response.json();
if (response.ok) {
console.log(setWorkouts(json));
console.log(workouts);
};
};
fetchWorkouts();
}, []);
return (
<div className='home'>
<div className="workouts">
{workouts && workouts.map((workout) => (
<p key={workout._id}>{workout.title}</p>
))}
</div>
</div>
);
}
export default Home
Can anyone tell why I'm receiving Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON? Have did many changes in server.js but still I can't figure out what's the problem inside my code.