unexpected token in json at position 0 reactjs mongodb

Question

///component

function Home() {
  const [show, setShow]= useState([{name:'', info:'', airingDate:'', poster:''}])
 
useEffect(()=>{
  fetch("/home")
  //.then(res=> res.json())
  .then(res => res.text())          
  .then(text => console.log(text))

})
  return (
    <div>
      {show.map(a=>
      <div>
        <h2>{a.title}</h2>
        </div>
      )}
    
    </div>
  )

/////index.js

 const TvShows = require("./models/TvShows");
const express = require("express");
const app = express();
const mongoose= require("mongoose")
const dotenv= require("dotenv");
const authRoute = require("./routes/auth");
const { application } = require("express");
const userRoute = require("./routes/users");
const commentRoute = require("./routes/comments");
const tvshowsRoute = require("./routes/tvshows");

const cors = require("cors");
app.use(cors());
console.log(".");
dotenv.config();
app.use(express.json());


mongoose.connect(process.env.MONGO_URL,{
    useCreateIndex: true,
   useNewUrlParser: true,
   useUnifiedTopology: true,

}).then(console.log("connected to mongoDB"));

 app.use("/auth", authRoute);
 app.use("/users", userRoute);
 app.use("/comments", commentRoute);
 app.post("/api/home", tvshowsRoute);
app.use("/api/home", tvshowsRoute);

/*
app.get('/api/home', (req,res)=>{
    TvShows.find().then((result)=>{
        res.send(result);
    })
}) 
*/

/*
app.use("/",(req,res)=>{
    console.log("main url")
})*/

app.listen("3001",()=>{
    console.log("backend running");
})

//////route

const router = require("express").Router();
const TvShows = require("../models/TvShows");



router.post("/api/home", async (req, res) => {
  
  console.log("here")
  try{   
          const newTvShow = new TvShows({
            title: req.body.title,
            poster: req.body.poster,
            info: req.body.info
          }); 
         const savedTvShows = await newTvShow.save(); 
         res.status(200).json(savedTvShows);
      }catch (err) {
        res.status(500).json(err);
      }
        
    }
);


router.route("/api/home").get((req, res)=>{
    TvShows.find()
    .then(foundShows=> res.json(foundShows))
})
 
module.exports = router;

when I change res.json with res.text I see my index.html page on console not the data I want to fetch from mongodb. This error is probably because I didn't use /api/ on root url but I couldn't figure it out where I should write it. I tried but didn't work. It would be so good if someone could've helped. Thank you so much.

Answer 1

Indeed, you are fetching the /home page of your front-end app. Assuming the api is on a different server, you would need to call the address of that server.

If you have a set up locally with a nodejs server and a react app running separately, you should have them run on two different ports.

If you have react app on http://localhost:3000 (default), then change your api to listen on 3001, then in your react code above, you can use the full uri

http://localhost:3001/api/home

in your fetch call.

I'm making a lot of assumptions about how you have this set up, based on my own experience of local development for similar problems.