How do I use browserify to convert node to the browser? nothing works for me?

Question

Hi.

I have this code:

import request from 'request';
import fs from 'fs'




const url = 'https://transfermarkt-api.vercel.app/players/28003/profile';
const headers = {
 'accept': 'application/json'
};




var myBody={}
request({
    url,
    headers
},

  (err, response, body) => {
   if (err) {

    console.error(err);

   } else {
    myBody = JSON.parse(body)
    
    console.log(myBody.name);
   }
   


fs.writeFileSync('data.json', JSON.stringify(myBody));
});

When I run node app.js in the terminal, i get this response:

PS C:\Users\Gili\Downloads\transfermarktProject> node app.js
Messi

I am trying to take this data and display it in the browser side, after doing a little research i found out that browserify can convert the node log to the browser.

I have followed countless tutorials on how to use browserify but none of them work. i got a bunch of errors in the console when i tried them.

Here is an example of the errors i got when trying the geeksforgeeks tutorial:

Access to fetch at 'https://transfermarkt-api.vercel.app/players/28003/profile' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
bundle.js:38215     GET https://transfermarkt-api.vercel.app/players/28003/profile net::ERR_FAILED 200
ClientRequest._onFinish @ bundle.js:38215
(anonymous) @ bundle.js:38133
emit @ bundle.js:23445
finishMaybe @ bundle.js:14114
endWritable @ bundle.js:14129
Writable.end @ bundle.js:14070
ClientRequest.end @ bundle.js:38385
Request.end @ bundle.js:77255
end @ bundle.js:76311
(anonymous) @ bundle.js:76325
onNextTick @ bundle.js:39034
Item.run @ bundle.js:34461
drainQueue @ bundle.js:34431
setTimeout (async)
runTimeout @ bundle.js:34349
process.nextTick @ bundle.js:34451
exports.setImmediate @ bundle.js:39027
Request.init @ bundle.js:76270
Request @ bundle.js:75874
request @ bundle.js:74333
268.fs @ bundle.js:41085
o @ bundle.js:1
r @ bundle.js:1
(anonymous) @ bundle.js:1
bundle.js:41090 TypeError: Failed to fetch
    at ClientRequest._onFinish (bundle.js:38215:10)
    at module.exports.<anonymous> (bundle.js:38133:8)
    at module.exports.emit (bundle.js:23445:5)
    at finishMaybe (bundle.js:14114:14)
    at endWritable (bundle.js:14129:3)
    at Writable.end (bundle.js:14070:22)
    at ClientRequest.end (bundle.js:38385:32)
    at Request.end (bundle.js:77255:14)
    at end (bundle.js:76311:14)
    at bundle.js:76325:7
(anonymous) @ bundle.js:41090
self.callback @ bundle.js:75932
emit @ bundle.js:23445
Request.onRequestError @ bundle.js:76624
emit @ bundle.js:23445
(anonymous) @ bundle.js:38229
Promise.then (async)
ClientRequest._onFinish @ bundle.js:38222
(anonymous) @ bundle.js:38133
emit @ bundle.js:23445
finishMaybe @ bundle.js:14114
endWritable @ bundle.js:14129
Writable.end @ bundle.js:14070
ClientRequest.end @ bundle.js:38385
Request.end @ bundle.js:77255
end @ bundle.js:76311
(anonymous) @ bundle.js:76325
onNextTick @ bundle.js:39034
Item.run @ bundle.js:34461
drainQueue @ bundle.js:34431
setTimeout (async)
runTimeout @ bundle.js:34349
process.nextTick @ bundle.js:34451
exports.setImmediate @ bundle.js:39027
Request.init @ bundle.js:76270
Request @ bundle.js:75874
request @ bundle.js:74333
268.fs @ bundle.js:41085
o @ bundle.js:1
r @ bundle.js:1
(anonymous) @ bundle.js:1
bundle.js:41095 Uncaught (in promise) TypeError: _fs.default.writeFileSync is not a function
    at Request._callback (bundle.js:41095:18)
    at self.callback (bundle.js:75932:22)
    at Request.emit (bundle.js:23445:5)
    at Request.onRequestError (bundle.js:76624:8)
    at module.exports.emit (bundle.js:23445:5)
    at bundle.js:38229:10

Does anyone know how i can use browserify to display my log in the browser? Is browserify the right tool for this?