Strange Error Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

[KeshavMaheshwari]

I am following a YT MERN stack tutorial did exactly the same as the yt instructor
getting this error
its
Uncaught (in promise) SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON

My home.js file

import { useEffect, useState } from "react"

// components
import ProductDetails from "../components/ProductDetails"

const Home = () => {
  const [products, setProducts] = useState(null)

  useEffect(() => {
    const fetchProducts = async () => {
      const response = await fetch('api/product/')
      const json = await response.json()   
      console.log(response.ok)
      if (response.ok) {
        setProducts(json)
      }
    }

    fetchProducts()
  }, [])

  return (
    <div className="home">
      <div className="products">
        {products && products.map((product) => (
          <ProductDetails key={product._id} product={product} />
        ))}
      </div>
    </div>
  )
}

export default Home

[lasjorg]

We don’t know what your backend looks like and we do not know what tutorial you are following.

Usually, when an API request that should send back JSON responds with HTML instead it is because of a server error. It might be an unhandled error that is making the server send back a normal response (like a 404 page or whatnot).