Yfiles HTML and webpack

Question

did anybody tried to use yfiles html with webpack and es6?

// All yfiles modules return the yfiles namespace object
import yfiles from '../../lib/yfiles/graph-input';
import '../../lib/yfiles/graph-style-defaults';
import '../../lib/yfiles/layout-organic';
import '../../lib/yfiles/layout-misc';
import '../../lib/yfiles/graph-layout-bridge';

const graphControl = new yfiles.canvas.GraphControl.ForId('graph');

When I tried to instantiate a new graph I get the following error:

Uncaught TypeError: Cannot read property 'ForId' of undefined(…)

I digged around a little bit and I noticed that yfiles.canvas.GraphControl in undefined.

Do you have any idea why this is happening? Or a webpack example that I can use?

Thank you

Answer 1

With ReactJS I use

componentDidMount() {
  const yfiles = require('../lib/yfiles/complete');
  const styles = this.__createStyles(yfiles);
}

The yfiles is available and you can inject it in other functions. Loading of the library happens only when I am rendering that Component..meaning it behaves the same as import.

Answer 2

See the yeoman generator for yFiles apps - it can scaffold an es6 webpack powered application using yFiles for HTML:

npm install -g yo
npm install -g generator-yfiles-app

yo yfiles-app