Req.body is ReadableStream { locked: false, state: 'readable', supportsBYOB: false } When using NextApiRequest

[meezin]

Hi there,

Software Spec

    "next": "13.4.7",
    "react": "18.2.0",

App Structure

app
- helper
- - api
- --auth.ts
- components
- -ChildComment.tsx

I have a helper to get a figma auth token using nextApiRequest (Thank you for @seanchas116 commitment)
Also, I would like to integrate with external APIs(Figma REST) in NextJS and make a POST request

While utilizing the route features on the lower version of nextjs in this project, I faced the the error. Working on POSTMAN so it's not related to invalid token

It's not data issue

Client Component

const handleSubmit = async (e: React.MouseEvent<HTMLElement>, message: String, parent_id: String) => {

    setSubmitting(true);

    //Define the post data - Json object
    const postData = {
      message: message,
      comment_id: parent_id
    }
    console.log("Log postData ===> ",postData);

    try {
      const response = await fetch('/api/comment/get-comment', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
      });
      const data = await response.json();

      console.log("Log Response ===> ",response);

      setMessageSent(true);
    } catch (error) {
      console.error(error);
    } finally {
      setSubmitting(false);
    }
  };

return (
<TextField
              id="outlined-multiline-flexible"
              label="Type your comment"
              multiline
              size="small"
              sx={{ width: '100%' }}
              value={message} onChange={(e) => setMessage(e.target.value)}>            
            </TextField>

            <IconButton sx={{mt:1}} onClick={(e) => handleSubmit(e,message,childComments[0].parent_id)}>
              <Send fontSize="small" />
            </IconButton> 
)

Server Router

export async function POST(req: NextApiRequest,res: NextApiResponse) {


   const body = req.body; << ERROR HERE

  const accessToken = await getFigmaToken(req);
  console.log(accessToken);
  // console.log("server call",message, comment_id);
  console.log("server POST call body",body);

try {
  const reponse = await fetch(
    `https://api.figma.com/v1/files/${figmaFileId}/comments`,
    {
      method: "POST",
      headers: {
        Authorization: "Bearer" + accessToken
      },
      body: JSON.stringify({
        message: body.message,
        commend_id: body.comment_id
      })
    }
  );
  const data = await reponse.json(); // .json() is asynchronous and therefore must be awaited
  
  // res.status(200).json(data);
  console.log(data);
} catch (error) {
  res.status(500).json({ message: 'Error submitting comment' });
}

}

Errors

• When I log console.log("server POST call body",body); , ReadableStream { locked: false, state: 'readable', supportsBYOB: false } happens

• I'm trying to const body = await req.body.json(); but TypeError: req.body.json is not a function

Please help this situation. THank you

[john-prutton]

I believe you should use await req.json() to get the body.

// route.ts
...
const body = await req.json()
...

[feyton]

Thank you,

This worked for me:

const formData = await request.json();
  console.log(formData);
  const asset = await Asset.create(formData);
  return NextResponse.json({
    message: "Form data submitted successfully!",
    data: asset,
  });

[mvluz]

@john-prutton Thank you so much!

[meezin]

I did this and it worked

//Convert ReadableStream to JSON ref.https://stackoverflow.com/a/74237249/7437570
let passedValue = await new Response(body).text();
let valueToJson = JSON.parse(passedValue);

[wiesty]

Same here.
for me it was:
let passedValue = await new Response(req.body).text();
let bodyreq = JSON.parse(passedValue);

idk why because the request is sent via application/json

[LucasHBG]

You can use await new Response(req.body).json() to parse it already.

[bkrajewski94]

Hi, I have the same issue. I'm using try catch block inside api route handlers. I do the const data = await request.json(); inside try block, but when an error is thrown somewhere along the way, I'd like to log it to a logging system inside catch. The problem is that I can't access the request body.

doing const data = await request.json();once more, throws an error body is unusable,
and await new Response(req.body).json() also throws an error Response body object should not be disturbed or locked

EDIT: I've found a solution
Like mentioned above according to this link:
The json() method of the [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) interface reads the request body and returns it as a promise that resolves with the result of parsing the body text as [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON).
The .json() method cannot be called more than once - it will result in an error;

It can be solved with request.clone() According to this
In fact, the main reason clone() exists is to allow multiple uses of body objects (when they are one-use only.)

However there is a gotcha
clone() throws a [TypeError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError) if the request body has already been used.

So the solution in my case looks like this

async function getRequestBody(request: NextRequest) {
  const requestClone = request.clone();
  const body = await requestClone.json();

  return body;
}

export async function POST(request: NextRequest) {
  try {
    const data = await getRequestBody(request);
      // handle request
    }
  } catch (error) {
    const body = await getRequestBody(request);
    // log error
    // can also be called inside logging function

    return new Response('Error', {
      status: 400,
    });
  }

[AyushSharma971]

ITS OUTPUT I AM GETTING IS THIS , BUT IT USED TO GIVE IMAGE URL WHAT TO DO
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

import Replicate from "replicate";
import { stream } from "xlsx";

enum ASRTIO {
"1:1",
"16:9",
"21:9",
"2:3",
"3:2",
"4:5",
"5:4",
"9:16",
"9:21",
}

enum OPFRMT {
"webp",
"jpg",
"png",
}

interface args {
userPrompt: string;
negativePrompt?: string;
systemPrompt?: string;
face_image: string | null;
model: string;
number_of_images: 1;
apiKey?: string;
image?: string | null;
settings: {
apiKey: string;
model: ${string}/${string} | ${string}/${string}:${string};
cfg?: number; // default 3.5, max 20 min 0
seed?: number;
steps?: number; // default 28 max 28 min 1
aspect_ratio?: ASRTIO; // default 1:1
output_format?: OPFRMT;
output_quality?: number; // default 90 max 100 min 10
prompt_strength?: number;
upscale?: number; // default 2 max 10 min 1
face_upsample?: boolean; //default true
background_enhance?: boolean; //default true
codeformer_fidelity?: number; //default 0.5 max 1 min 0
image?: string | null;
};
}

export default async function one(arg: args) {
try {
const { model, systemPrompt, apiKey, image, userPrompt, negativePrompt, face_image, settings } = arg;
console.log("settings", settings);
// Validate settings.model
// if (!settings.model || !settings.model.match(/^.+/.+(:.+)?$/)) {
// throw new Error('Invalid model format. Expected format: "owner/model" or "owner/model:version"');
// }

// Validate required fields
// if (!settings.apiKey) {
//   throw new Error('API key is required');
// }

// if (!userPrompt) {
//   throw new Error('User prompt is required');
// }

const replicate = new Replicate({ auth: apikey});

const input = {
  // width: 768,
  // height: 768,
  prompt: userPrompt,
  negative_prompt: negativePrompt || '',
  face_image: face_image || null,
  // number_of_images: 1,
  cfg: settings.cfg || 3.5,
  seed: settings.seed || Math.floor(Math.random() * 1000000),
  steps: settings.steps || 28,
  aspect_ratio: settings.aspect_ratio || '1:1',
  output_format: settings.output_format || 'png',
  output_quality: settings.output_quality || 90,
  prompt_strength: settings.prompt_strength || 1,
  image: settings.image || null,
  stream:false,
  streaming: false,
};

console.log('ReplicateImageClient Input:', input);

const {output} = await replicate.run("black-forest-labs/flux-schnell", {
  input: input,
}).json();



console.log('ReplicateImageClient Output:', output);
return output;

} catch (error) {
console.error('ReplicateImageClient Error:', error);
throw new Error('Please contact the support team');
}
}

[Stroller15]

change the replicate verion in package.json to

"replicate": "^0.33.0"

don't forget npm install to apply the changes

[AyushSharma971]

ITS OUTPUT I AM GETTING IS THIS , BUT IT USED TO GIVE IMAGE URL WHAT TO DO
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

import Replicate from "replicate";
import { stream } from "xlsx";

enum ASRTIO {
"1:1",
"16:9",
"21:9",
"2:3",
"3:2",
"4:5",
"5:4",
"9:16",
"9:21",
}

enum OPFRMT {
"webp",
"jpg",
"png",
}

interface args {
userPrompt: string;
negativePrompt?: string;
systemPrompt?: string;
face_image: string | null;
model: string;
number_of_images: 1;
apiKey?: string;
image?: string | null;
settings: {
apiKey: string;
model: ${string}/${string} | ${string}/${string}:${string};
cfg?: number; // default 3.5, max 20 min 0
seed?: number;
steps?: number; // default 28 max 28 min 1
aspect_ratio?: ASRTIO; // default 1:1
output_format?: OPFRMT;
output_quality?: number; // default 90 max 100 min 10
prompt_strength?: number;
upscale?: number; // default 2 max 10 min 1
face_upsample?: boolean; //default true
background_enhance?: boolean; //default true
codeformer_fidelity?: number; //default 0.5 max 1 min 0
image?: string | null;
};
}

export default async function one(arg: args) {
try {
const { model, systemPrompt, apiKey, image, userPrompt, negativePrompt, face_image, settings } = arg;
console.log("settings", settings);
// Validate settings.model
// if (!settings.model || !settings.model.match(/^.+/.+(:.+)?$/)) {
// throw new Error('Invalid model format. Expected format: "owner/model" or "owner/model:version"');
// }

// Validate required fields
// if (!settings.apiKey) {
// throw new Error('API key is required');
// }

// if (!userPrompt) {
// throw new Error('User prompt is required');
// }

const replicate = new Replicate({ auth: apikey});

const input = {
// width: 768,
// height: 768,
prompt: userPrompt,
negative_prompt: negativePrompt || '',
face_image: face_image || null,
// number_of_images: 1,
cfg: settings.cfg || 3.5,
seed: settings.seed || Math.floor(Math.random() * 1000000),
steps: settings.steps || 28,
aspect_ratio: settings.aspect_ratio || '1:1',
output_format: settings.output_format || 'png',
output_quality: settings.output_quality || 90,
prompt_strength: settings.prompt_strength || 1,
image: settings.image || null,
stream:false,
streaming: false,
};

console.log('ReplicateImageClient Input:', input);

const {output} = await replicate.run("black-forest-labs/flux-schnell", {
input: input,
}).json();

console.log('ReplicateImageClient Output:', output);
return output;
} catch (error) {
console.error('ReplicateImageClient Error:', error);
throw new Error('Please contact the support team');
}
}

[Stroller15]

change the replicate verion in package.json to

"replicate": "^0.33.0"

don't forget npm install to apply the changes