NextJS：TypeError：无法读取未定义的属性“json”

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);
  }
};

Answer 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 } };
};

Answer 2

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 getFetch function. 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 } };
};