Res.buffer is not a function error while fetching data

Question

I am trying to use fetch in my create-react-app to get images and import it into my sanity schema. I am trying to fetch the image and use res.buffer. But this just directly shows

TypeError res.buffer is not a function

The code I am using is given below:

import React from "react";

const Parser = () => {
  const fetch = require('node-fetch');
  const filePath =
    "https://upload.wikimedia.org/wikipedia/commons/1/15/White_Persian_Cat.jpg";
  fetch(filePath).then((res) => res.buffer())
 
  return (
<div></div>
)

};

export default Parser;

why could this error be occurring here?

Is data fetched successfully? You should use try-catch block to catch error along the way — Vo Quoc Thang
– Vo Quoc Thang, Commented Feb 12, 2021 at 10:27
Yes the data is fetched successfully. Its only the res.buffer part that is givine me error — Marium Ali
– Marium Ali, Commented Feb 12, 2021 at 11:03
"Body has no buffer() method like node-fetch, but instead a arrayBuffer() method for the same function. I checked and it looks like in version 2.0 of node-fetch, arrayBuffer() is implemented for just this exact use case: where we want compatibility on the browser and in nodejs:" I got this from this link: github.com/perry-mitchell/webdav-client/issues/74. Try to use arrayBuffer() instead — Vo Quoc Thang
– Vo Quoc Thang, Commented Feb 12, 2021 at 11:31
@VoQuocThang It worked when i used arrayBuffer() i guess the buffer() method is just not supported outside of nodejs — Marium Ali
– Marium Ali, Commented Feb 13, 2021 at 9:14

ttt · Accepted Answer · 2021-02-12 11:33:16Z

1

There is no such attribute in the res. I wonder if this function is only available in nodeJS using the module node-fetch. Check the info here.

//using fetch in browser, res is as follow
{
body: ReadableStream
bodyUsed: false
headers: Headers
ok: true
redirected: false
status: 200
statusText: ""
type: "basic"
url: "https://upload.wikimedia.org/wikipedia/commons/1/15/White_Persian_Cat.jpg"
}

answered Feb 12, 2021 at 11:33

ttt

1,8091 gold badge12 silver badges26 bronze badges

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

2 Comments

Marium Ali Over a year ago

Yes.. thats probably it.. In the node fetch docs it said 'This is a node-fetch only API.' But i thought maybe it would work in react app as well.

ttt Over a year ago

@MariumAli After you have require('node-fetch'), can you post the result of console.log(res) so that we may study tgt

Marium Ali · Accepted Answer · 2021-02-13 09:16:46Z

0

I was able to solve this by using arrayBuffer() instead of just buffer().

import React from "react";

const Parser = () => {
  const fetch = require('node-fetch');
  const filePath =
    "https://upload.wikimedia.org/wikipedia/commons/1/15/White_Persian_Cat.jpg";
  fetch(filePath).then((res) => res.arrayBuffer())
 
  return (
<div></div>
)

};

export default Parser;

answered Feb 13, 2021 at 9:16

Marium Ali

1242 silver badges10 bronze badges

Comments

nezort11 · Accepted Answer · 2024-05-08 11:41:43Z

For me in React Native and ethers.js (answering here because it is top in results when googling) this solved the issue: https://github.com/ethers-io/ethers.js/issues/1995#issuecomment-2100354985

patch node_modules/@ethersproject/web/lib/browser-geturl.js

// ...
-var bytes_1 = require("@ethersproject/bytes");
+var strings_1 = require("@ethersproject/strings");
// ...
                case 1:
                    response = _a.sent();
-                    return [4 /*yield*/, response.arrayBuffer()];
+                    return [4 /*yield*/, response.text()];
                case 2:
                    body = _a.sent();
                    headers = {};
                    if (response.headers.forEach) {
                        response.headers.forEach(function (value, key) {
                            headers[key.toLowerCase()] = value;
                        });
                    }
                    else {
                        ((response.headers).keys)().forEach(function (key) {
                            headers[key.toLowerCase()] = response.headers.get(key);
                        });
                    }
                    return [2 /*return*/, {
                            headers: headers,
                            statusCode: response.status,
                            statusMessage: response.statusText,
-                            body: (0, bytes_1.arrayify)(new Uint8Array(body)),
+                            body: strings_1.toUtf8Bytes(body),
                        }];

Tried to polyfill using isomorphic-unfetch or node-fetch but with no success

Collectives™ on Stack Overflow

Res.buffer is not a function error while fetching data

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related