SPFX with React framework + pnp js

Question

I am working on a project in spfx with react framework and I am using pnp js for interacting to sharpoint list/libraries. 

 

I am getting an error in following piece of code.

 

sp.web.getFolderByServerRelativeUrl("doc_lib_internal_name").files.add(file.name, file, true)

.then((f) =>{

console.log(f.file.listItemAllFields);

return f.file.listItemAllFields;

})

.catch((err)=>{

console.log(err);

alert(err);

}); 

 

Error given : Type-error 'Failed To fetch'.

File is getting added to document library but after that control is going to catch block instead of then block.

 

 I am not getting where exactly I am doing wrong.