NextJS: TypeError: Cannot read property 'json' of undefined

Question

I've this code into pages folder on my NextJS environment. It gets data calling an external API Rest, and it's working because the console.log(response); line show me by console the Json API response. The problem I've is that I get this error in browser:

TypeError: Cannot read property 'json' of undefined

Corresponding with this line code:

const data = await res.json();

This is the complete file with the code:

import React from "react";
import fetch from "node-fetch";

const getFetch = async (invoicesUrl, params) => {
  fetch(invoicesUrl, params)
    .then((response) => {
      return response.json();
    })
    .then((response) => {
      console.log(response);
    })
    .catch((err) => {
      console.log(err);
    });
};

export const getServerSideProps = async () => {
  const invoicesUrl = "https://192.168.1.38/accounts/123456";
  const params = {
    method: "get",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  };
  const res = await getFetch(invoicesUrl, params);
  const data = await res.json();
  console.log("Data Json: ", data);

  return { props: { data } };
};

This is the Json API response that I see by console:

{
  account: [
    {
      id: '7051321',
      type: 'probe',
      status: 'open',
      newAccount: [Object],
      lastDate: '2020-07-04',
      taxExcluded: [Object],
      totalRecover: [Object],
      documentLinks: []
    },
  ]
}

Any idea how can I solve it? Thanks in advance.

UPDATE Here the code working good:

import React from "react";
import fetch from "node-fetch";

const getFetch = async (invoicesUrl, params) => {
   return fetch(invoicesUrl, params);
};

export const getServerSideProps = async () => {
  const invoicesUrl = "https://192.168.1.38/accounts/123456";
  const params = {
    method: "get",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  };
  try {
    const res = await getFetch(invoicesUrl, params);
    const data = await res.json();
    console.log("Data JSON: ", data);
    return { props: { data } };
  } catch (error) {
    console.log("Data ERROR: ", error);
  }
};

sidthesloth · Accepted Answer · 2020-09-09 18:27:22Z

1

There are a couple of things you have to change.

const getFetch = async (invoicesUrl, params) => {
  fetch(invoicesUrl, params)
    .then((response) => {
      return response.json();
    })
    .then((response) => {
      console.log(response);
      return response; // 1. Add this line. You need to return the response.
    })
    .catch((err) => {
      console.log(err);
    });
};

export const getServerSideProps = async () => {
  const invoicesUrl = "https://192.168.1.38/accounts/123456";
  const params = {
    method: "get",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  };
  const data = await getFetch(invoicesUrl, params);
  // const data = await res.json(); 2. Remove this you have already converted to JSON by calling .json in getFetch
  console.log("Data Json: ", data); // Make sure this prints the data.

  return { props: { data } };
};

answered Sep 9, 2020 at 18:27

sidthesloth

1,4771 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sebastian Diaz Over a year ago

I've made that changes you suggest, and now I get this error: "SerializableError: Error serializing .data returned from getServerSideProps in "/invoicing/invoices". Reason: undefined cannot be serialized as JSON. Please use null or omit this value all together". There are two "return" into your getFetch function, is that correct?

sidthesloth Over a year ago

The reason is that the response returned from your API is not serializable. If you update your question with the full object I will be able to point where the problem is. If not, you can find it out yourself using the answer here: stackoverflow.com/questions/30579940/…

Sebastian Diaz Over a year ago

Ok, probably the reason to not be serializable is those elements with content "[Object]" in the console but with content if I call the API with another way (curl, Postman).

sidthesloth Over a year ago

Yes, it is something inside [Object] that is not serializable. For NextJS, it needs to be serializable. You can use this: stackoverflow.com/questions/41587443/… to print the entire structure and see where the problem is. I'll be happy to help more. Btw I think I have fixed the original issue for the question. If so please accept..:)

Sebastian Diaz Over a year ago

Thanks for the help. I'll take a look to that link. Sorry, but I can't accept your answer as correct (i don't want confuse another users) because it can't work for me after try many times. I've updated my original question and after UPDATE title I putted the code that works for me. However, may be another user with this issue can vote your answer as the right! Thanks again.

|

Sunil Choudhary · Accepted Answer · 2020-09-09 19:40:38Z

1

You have return statement in wrong place. When the function is expecting a return. You need to return when the statements are executed not inside the promise then function because it is an async callback function which is not sync with the statement inside getFetchfunction. I hope i have made things clear. Below is the code which will any how return something

import React from "react";
import fetch from "node-fetch";

const getFetch = async (invoicesUrl, params) => {
  return fetch(invoicesUrl, params);
};

export const getServerSideProps = async () => {
  const invoicesUrl = "https://192.168.1.38/accounts/123456";
  const params = {
    method: "get",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  };
  try{
     const res = await getFetch(invoicesUrl, params);
     console.log("Data Json: ", res);
  }catch(error){
     console.log("Data Json: ", error);
  }
  return { props: { res } };
};

edited Sep 9, 2020 at 19:40

answered Sep 9, 2020 at 18:34

Sunil Choudhary

3441 silver badge6 bronze badges

1 Comment

Sebastian Diaz Over a year ago

Ok, thanks! it helped me. Now my code is working. I will update my original question with the code working. However, here I thing you should change "return { props: { data } }" by "return { props: { res } }". Thanks again.

Collectives™ on Stack Overflow

NextJS: TypeError: Cannot read property 'json' of undefined

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related