0

I am trying to integrate noflo ui 'the-graph' with a React based front end. I am trying to wrap demo-simple.html example into a react component as simple-demo.js and thereafter build on top of it.

On building and running I get the following errors:

Uncaught ReferenceError: React is not defined at Object.module.exports.register (bundle.js:42029).......

On looking into bundle.js, I find that the cause is:

TheGraph.SVGImage = React.createFactory( React.createClass({......

my simple-demo.js has just the following code and basic boiler-plate:

import React, {Component} from 'react';
var fbpGraph = require('fbp-graph');
var theGraph = require('the-graph');

Here I have already imported React, but after importing 'the-graph' I get the error. If this import is commented, there is no issue.

It will be of great help if someone can shed insight into what is going wrong. Thanks for you patience and help.

Santosh Kumar
  • 143
  • 12
  • `imports` are async and `requires` are synchronous. So it's possible that your loading them in the wrong order. Try changing your react import to a require and see if that helps. – Chase DeAnda Oct 19 '17 at 21:13
  • Other than that, did you run an `npm install`? – Chase DeAnda Oct 19 '17 at 21:13
  • Its a good point regarding imports and requires. I tried changing import to require and it did not work out. I have done npm install, so that was also not the issue. – Santosh Kumar Oct 20 '17 at 10:41

1 Answers1

0

flowhub/the-graph expects a global React variable and It worked out by adding react and hammer in the index.html in the following manner:

<body>
<div class="container"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="app/bundle.js"></script>
</html>

Currently it doesn't work with react 16.0.0 and I needed 15.4.2 to make it work. So in the current form of this library, I believe this is the way to proceed.

Santosh Kumar
  • 143
  • 12