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

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 :

1. 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 :

2. 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 {
...
}