Fails to run example

[xhluca]

When I try to run the example given in readme, the following is returned:

ERROR in ./src/demo/App.js
Module not found: Error: Can't resolve 'react-cytoscapejs' in 'C:\Users\xingh\git\dash-cytoscape\src\demo'
 @ ./src/demo/App.js 17:24-52
 @ ./src/demo/index.js
 @ multi ./src/demo/index.js

The following code is written in App.js:

/* eslint no-magic-numbers: 0 */
import React from 'react';
import ReactDOM from 'react-dom';
import CytoscapeComponent from 'react-cytoscapejs';

class App extends React.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;

and ran in index.js (by calling NPM run start):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

@chriddyp

[xhluca]

Here are the steps to reproduce it:

1. Create a dash-cytoscape directory
2. Clone and copy the content of dash-component-boilerplate inside the directory
3. yarn add react-cytoscapejs
4. Copy and paste the code given above into src/demo/App.js
5. npm install
6. npm run start

Alternative, take a look at https://github.com/plotly/dash-cytoscape/tree/4256895be22e2adfc412fb450d4bd0bd2101e9ce

[chriddyp]

@xhlulu - Let's discuss in https://github.com/plotly/dash-cytoscape/ as this isn't an issue with react-cytoscapejs.

Module not found: Error: Can't resolve 'react-cytoscapejs' in 'C:\Users\xingh\git\dash-cytoscape\src\demo'

This error message is trying to tell you the error. In JS (es6), there are relative imports just like in Python. When you do import CytoscapeComponent from 'react-cytoscapejs'; it's trying to import a file named react-cytoscape from the current directory of the file. But, the file is in some demo folder so it can't import it. So, you'll need to do a relative import, something like import CytoscapeComponent from '../../src/react-cytoscapejs'. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import for more details