dagre and dagre-d3 don't work with webpack

[wolffiex]

Webpack would be handy for packaging dagre-d3, but it looks like there's something in the way that the module structure is put together that is breaking it. When I run webpack on a project that includes dagre-d3, I get the following errors. This appears to be related to the code in the /lib files that is like "if (require)..."

[22:05:12] Version: webpack 1.4.13
Asset Size Chunks Chunk Names
main.bundle.js 913110 0 [emitted] main

WARNING in .//dagre-d3/lib/graphlib.js
Critical dependencies:
4:4-11 require function is used in a way, in which dependencies cannot be statically extracted
@ .//dagre-d3/lib/graphlib.js 4:4-11

WARNING in .//dagre-d3/lib/lodash.js
Critical dependencies:
4:4-11 require function is used in a way, in which dependencies cannot be statically extracted
@ .//dagre-d3/lib/lodash.js 4:4-11

WARNING in .//dagre/lib/graphlib.js
Critical dependencies:
4:4-11 require function is used in a way, in which dependencies cannot be statically extracted
@ .//dagre/lib/graphlib.js 4:4-11

WARNING in .//dagre-d3//graphlib/lib/lodash.js
Critical dependencies:
4:4-11 require function is used in a way, in which dependencies cannot be statically extracted
@ .//dagre-d3//graphlib/lib/lodash.js 4:4-11

WARNING in .//dagre/lib/lodash.js
Critical dependencies:
4:4-11 require function is used in a way, in which dependencies cannot be statically extracted
@ .//dagre/lib/lodash.js 4:4-11

WARNING in .//dagre//graphlib/lib/lodash.js
Critical dependencies:
4:4-11 require function is used in a way, in which dependencies cannot be statically extracted
@ .//dagre//graphlib/lib/lodash.js 4:4-11

[cpettitt]

Hey Adam!

Do you have an small example / repro steps I can try?

[rafales]

Here's a test case:

sudo npm install -g webpack
mkdir example
cd example
mkdir app
echo 'require("dagre-d3")' > app/app.js
npm install dagre-d3
webpack app/app.js dist/

Webpack doesn't like this pattern:

/* global window */

var graphlib;

if (require) {
  try {
    graphlib = require("graphlib");
  } catch (e) {}
}

if (!graphlib) {
  graphlib = window.graphlib;
}

module.exports = graphlib;

[Kepro]

@rafales use as alias in resolve in webpack ;)

resolve: {
alias: {
d3: ...
dagre-d3: ...
}
}

[chrisvfritz]

@Kepro Would you mind being more explicit in how we would use aliases to get rid of these warnings?

[pakdev]

I got dagre to work with webpack by forking dagre and graphlib and modifying the bower.js file so that index.js is "main" and the "lib" folder/index.js aren't ignored. This allows webpack to do the bundling vs browserify. Finally, I used the webpack.ProvidePlugin with { dagre: 'dagre' } so I wouldn't have to "require('dagre')" everywhere it's used. When I get a chance, I'll look into making new dagre-webpack and graphlib-webpack packages.

[pakdev]

dagre-webpack and graphlib-webpack repos are now published to bower

[raythree]

Getting the exact same error (above from 1/6/2015) with the current versions when trying to use with react-slingshot which uses Webpack 2.x

[pakdev]

Are you using the dagre or dagre-webpack package?

[emailnjv]

Sorry just getting back to this now. I've tried bower install of dagre-webpack and graphlib-webpack. A usage example of how to get the demos working would be great, showing how to get a reference for:

  var g = new dagreD3.graphlib.Graph().setGraph({});

If I do:

const dagreD3 = require('../../bower_components/dagre-webpack');

Then it has issues resolving graphlib-webpack.

[pakdev]

I've updated the README.md for the dagre-webpack project with instructions. Your code looks correct, but I never tried requiring dagre-webpack directly. I've always used the bower-webpack-plugin. Perhaps the plugin automatically 'requires' graphlib-webpack from dagre-webpack's bower.json's dependencies. Did you follow this documentation?

[Y-cookie]

Will dagre-d3 package with a version above webpack 4 report an error @ @wolffiex