0

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')
);
Improve this question
1
  • This is more of a javascript question.
    – niksmac
    May 2, 2017 at 17:51

1 Answer 1

Reset to default
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.

Improve this answer
1
  • This seems to bring the IpfsAPI object into the reactjs. I am unsure why the import fails.
    – Trevor Lee Oakley
    May 2, 2017 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.