ServerError: Invalid JSON response body... in NextJS app with fetch

Question

I have a nextJS app running locally, I also have a flask api running locally. I know the flask is returning proper json through Postman. The results from the get request to that are below:

{
    "results": [
        [
            {
                "date_posted": "Mon, 17 Jan 2022 00:00:00 GMT",
                "description": "This is a description",
                "id": 1,
                "mainImg": "https://i.ibb.co/pwxkyGw/How-the-Web-Works-1.png",
                "slug": "Test-Post",
                "subtitle": "Test Subtitle",
                "tags": "test tag",
                "title": "Test Post 2"
            }
        ]
    ]
}

So, now that I knew that was correct I started looking into the javascript:

import React from 'react';

export const getStaticPaths = async () => {
    const res = await fetch('http://localhost:3000/search/all')
    const data = await res.json()

    const paths = data.results[0].map(post => {
        return {
            params: { id: post.id.toString() }
        }
    })

    return {
        paths,
        fallback: false
    }
}

export const getStaticProps = async (context) => {
    const id = context.params.id
    const res = await fetch('http://localhost:5000/search/postID/' + id)
    const data = await res.json()

    return {
        props: {data}
    }
}

export default function Post({data}) {
  return (
  <div>
      {props.data}
  </div>
    )
}

I checked everything, and for some reason I still get this error:

Server Error
Error: invalid json response body at http://localhost:3000/search/all reason: Unexpected token < in JSON at position 0

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\post\[pid].js (5:17) @ async getStaticPaths

  3 | export const getStaticPaths = async () => {
  4 |     const res = await fetch('http://localhost:3000/search/all')
> 5 |     const data = await res.json()
    |                 ^
  6 | 
  7 |     const paths = data.results[0].map(post => {
  8 |         return {
Show collapsed frames

I understand I am missing something, which is why I am here. If anyone has seen this and knows a fix please let me know!

`Unexpected token < in` usually means that the endpoint is giving you an HTTP error. Like 404, or 500. Please may you debug that? — evolutionxbox, Feb 03 '22 at 15:08
[Duplicated question](https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0). The error is the same, probably the solution will be too. — Renato Willyan, Feb 03 '22 at 15:13
Does this answer your question? ["SyntaxError: Unexpected token < in JSON at position 0"](https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0) — Renato Willyan, Feb 03 '22 at 15:13
It does not, the response I added from postman shows the body. There is no html it is only json — Chase Quinn, Feb 03 '22 at 15:53

score 0 · Answer 1 · answered Feb 04 '22 at 01:22

0

So... if you look at the code for both fetches. One says port 3000 and the other says 5000... They are both supposed to be 5000. I can not believe it took me this long to catch that smdh.

answered Feb 04 '22 at 01:22

Chase Quinn

60
10

ServerError: Invalid JSON response body... in NextJS app with fetch

1 Answers1