Ipfs-http-client isn't a recognized Module in my react app

Question

I am trying to use the ipfs package inside my react app but it won't recognize the module when I run.

sudo npm start

I install the module with

 sudo npm install -g --unsafe-perm ipfs-http-client

This installs with the following output

> [email protected] install /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/iso-constants
> node build.js > index.browser.js


> [email protected] install /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/libp2p-crypto/node_modules/secp256k1
> node-gyp-build || exit 0


> [email protected] install /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/ursa-optional
> node rebuild.js


> [email protected] postinstall /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/protobufjs
> node scripts/postinstall

npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/babel/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 137 packages from 293 contributors, removed 64 packages, updated 15 packages, moved 8 packages and audited 2367 packages in 118.569s

This is the error I get

./src/components/ipfs/fileUpload.js
Module not found: Can't resolve 'ipfs-api' in '/home/a/Documents/c/d1/dapp1/Dapp/client/src/components/ipfs'

This is the component

import React, { Component, useEffect, useState } from "react";
const ipfsAPI = require('ipfs-api')

// connect to the default API address http://localhost:5001


const UploadImage = () => {

  const [request, setRequest] = useState({});
const ipfs = ipfsAPI

  const handleSubmit = async  (data) => {

    const { cid } = await ipfs.add(data)

  }

  return (
    <div>
      <form method="post" onSubmit={handleSubmit} enctype="multipart/form-data">
        <div>
          <label for="profile_pic">Choose file to upload</label>
          <input type="file" id="profile_pic" name="profile_pic"
                accept=".jpg, .jpeg">
          </input>
        </div>
        <div>
          <button>Submit</button>
        </div>
      </form>
    </div>
  )
}

export default UploadImage;

I am using node version v14.16.1 and npm version 6.14.12 I have also installed it globally with -g and it also installs successfully but I get the same error when I run sudo npm start.

Answer 1

include a specific version of the ipfs package,

like

npm i [email protected]