2

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

Filipe
  • 1,788
  • 2
  • 13
  • 18
Keldon
  • 192
  • 1
  • 10
  • I found a workaround for the time being, after trying different approaches using the loader demoes i would recommend trying to experiment with the script loading demo in the evaluation copy. I was having a similar problem, the yfiles canvas was undefined but trying to use the approach in the script loading demo solved it for me (for the time being). – Krewie Feb 08 '16 at 13:44
  • 1
    @Keldon, when evaluating yFiles you are also entitled to support. So you should just send an e-mail to the support team. Most of us don't comb Stack Overflow for questions. – Joey Feb 15 '16 at 07:35
  • For those who find this answer now and in the future: With the new native ES6 modules available in version 2.1 the code is much cleaner than the old code above. There are Webpack and Es6 demos in the bundle, now and the yeoman generator can create all combinations for you. – Sebastian Mar 16 '18 at 18:31

2 Answers2

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.

kompupat
  • 15
  • 2
0

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
Sebastian
  • 7,729
  • 2
  • 37
  • 69