Basic Example can't be Reproduced

[xhluca]

Currently trying to run the basic example on react-cytoscapejs version 1.0.0 using create-react-app. Here's what i have done:

npx create-react-app cytoscape-basic-app
cd cytoscape-basic-app
yarn add react-cytoscapejs@1.0.0

At this point, we change the src/App.js file with the following code modified from the basic example:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import CytoscapeComponent from 'react-cytoscapejs';

class App extends Component {
  constructor(props){
    super(props);
  }

  render(){
    const elements = [
       { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
       { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },
       { data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } }
    ];

    return <CytoscapeComponent elements={elements} style="width: 600px; height: 600px;" />;
  }
}

export default App;

Running yarn start returns the following error:

./src/App.js
Module not found: Can't resolve 'react-cytoscapejs' in 'C:\Users\xingh\temp\test_cytoscape\cytoscape-app\src'

I solved this by changing the import statement to be:

import CytoscapeComponent from 'react-cytoscapejs/src';

Then the error became:

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
    in div (created by CytoscapeComponent)
    in CytoscapeComponent (at App.js:17)
    in App (at src/index.js:7)

which was solved by changing the return statement for the render() method to:

return <CytoscapeComponent elements={elements} style={{width: "600px", height: "600px"}} />;

Which compiled successfully.

I suggest updating the readme to take those problems into account. Let me know if I should start a PR. Thank you!

[xhluca]

@VeraZab @bpostlethwaite

[maxkfranz]

I published v1.0.1. You should be able to import CytoscapeComponent from 'react-cytoscapejs', and the readme has been updated re. the style attribute in the example.

[xhluca]

Thank you!

[maxkfranz]

Closing for now, can re-open if this pops up again

[JSymons7]

Hi @maxkfranz, still seeing this issue when I try and run the basic example. Implementing above solution fixed it. Could well be user error. Shout out if you want any of my settings.