Module not found: Can't resolve 'ipfs-http-client' in 'D:\Pro\src\components' - node.js

Question

I am trying to send files to ipfs using a website in node-js. I am using the ipfs-http-client module. When i try to access the module using require I keep getting this error :
Module not found: Can't resolve 'ipfs-http-client' in 'D:\Pro\src\components' in the command prompt.
This the error message in the website :
Failed to compile
./src/components/App.js
Module not found: Can't resolve 'ipfs-http-client' in 'D:\Pro\src\components'
This error occurred during the build time and cannot be dismissed.
I installed the module using the command specified in the official docs -
"npm install --save ipfs-http-client" . I can see the module in my dependencies but still getting this error.
I am a complete newbie to all this. A little help would be much appreciated. Thanks in advance.
This is how I am accessing the module :
***import React, { Component } from 'react';
import logo from '../logo.png';
import './App.css';
const ipfsClient = require('ipfs-http-client');
const projectId = '*****';
const projectSecret = '***';
const auth =
'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');
const ipfs = ipfsClient.create({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
},
});
class App extends Component {
constructor(props) {
super(props);
this.state={
buffer: null
};
}
captureFile=(event) => {
event.preventDefault()
const file = event.target.files[0]
const reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend=() => {
this.setState({buffer: Buffer(reader.result) })
}
console.log(event.target.files)
}
onSubmit = (event) => {
event.preventDefault()
console.log("Submitting the form...")
ipfs.add(this.state.buffer, (error,result) => {
console.log('Ipfs result', result)
if(error){
console.error(error)
return
}
})
}***

Answer 1

Try using earlier version I have just tried it. Do the following :
npm uninstall --save ipfs-http-client
npm i --save ipfs-http-client#33.1.1
I do not know what the problem is with the updated version but this is a quick fix up for now. And will get your code running

Answer 2

Import it like this:
const ipfsClient = require('ipfs-http-client');
Then create the connection:
const ipfs = ipfsClient.create(https://ipfs.infura.io:5001);
To upload:
const uploadFile = await ipfs.add({ content: file });

Answer 3

Maybe you're missing the babel loaders I got this working using the following:
npm i ipfs-http-client#50.1.2 #babel/core --save

Answer 4

If you take a look at the package at the npm website, you'll see that the newer versions import the create-function as such:
import { create } from 'ipfs-http-client'
Using this, you can simply change your code to
import React, { Component } from 'react';
import logo from '../logo.png';
import './App.css';
import { create } from 'ipfs-http-client';
const projectId = '*****';
const projectSecret = '***';
const auth =
'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');
const ipfs = create({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
},
});
class App extends Component {
...
}