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')
);