IPFS API importing and ReactJS

Question

I am integrating IPFS into a ReactJS frontend to store text in IPFS (then the address to be stored on the blockchain). I have an import error which is outside my experience and I hope someone can help.

Error -

IpfsAPI
VM153:1 Uncaught ReferenceError: IpfsAPI is not defined
at eval (eval at evaluate (:85:21), <anonymous>:1:1)
at Object.<anonymous> (http://jenbil.com:3000/static/js/bundle.js:32851:24)
at Object.<anonymous> (http://jenbil.com:3000/static/js/bundle.js:33301:31)
at __webpack_require__ (http://jenbil.com:3000/static/js/bundle.js:556:30)
at fn (http://jenbil.com:3000/static/js/bundle.js:87:20)
at Object.<anonymous> (http://jenbil.com:3000/static/js/bundle.js:10871:13)
at __webpack_require__ (http://jenbil.com:3000/static/js/bundle.js:556:30)
at fn (http://jenbil.com:3000/static/js/bundle.js:87:20)
at Object.<anonymous> (http://jenbil.com:3000/static/js/bundle.js:591:19)
at __webpack_require__ (http://jenbil.com:3000/static/js/bundle.js:556:30)

The imports are generally working as others appear, eg

Web3
function Web3(provider) {
    this._requestManager = new RequestManager(provider);
    this.currentProvider = provider;
    this.eth = new Eth(this);
    this.db = new DB(this);
    this.shh = ne…

I have this code -

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Web3 from 'web3'
import _ from 'lodash'
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import IpfsAPI from 'ipfs-api'

I have ipfs in my node modules -

root@ubuntu-512mb-nyc3-01:/usr/share/nginx/html/ipfs/node_modules# ls ipfs*
ipfs-api:
CHANGELOG.md  CONTRIBUTING.md  examples     LICENSE       package.json  src
circle.yml    dist             gulpfile.js  node_modules  README.md

ipfs-block:
circle.yml  dist  LICENSE  package.json  README.md  src

ipfs-unixfs:
circle.yml  dist  LICENSE  package.json  README.md  src  test

Here is my package.json

root@ubuntu-512mb-nyc3-01:/usr/share/nginx/html/ipfs# more package.json
{
  "name": "zillerium",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "bootstrap": "^3.3.7",
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.8",
    "react-bootstrap-dropdown": "^0.3.0",
    "react-bootstrap-table": "^3.2.1",
    "react-dom": "^15.4.2",
    "web3": "^0.18.4"    
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "dependencies": {
    "ipfs-api": "^14.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

And my index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import IpfsAPI from 'ipfs-api'

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

There could be the possibilities of node module is not installed properly. Please check your node_modules directory.

try to use require and see whether you are facing the same issues again

const ipfsApi=require('ipfs-api');

Still, if you face the same issue, the node module is not installed properly.