Cannot use dagre-d3 in Vue

daming-lu commented 6 years ago

I've 'npm installed' dagre-d3 and wanted to use it in my Vue app. But after I imported it as below:

    import dagreD3 from 'dagre-d3'

I got errors like below:

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

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

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

WARNING in ./~/dagre-d3/lib/d3.js
5:6-13 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

christianvoigt commented 6 years ago

I just came across the same problem, when I tried to switch back to the official dagre-d3. Some time back I thought this repository was dead and created a fork that depends on ciena-dagre and works fine in Vue: https://github.com/christianvoigt/dagre-d3

But let's hope this issue gets fixed and we can use the real dagre-d3 in Vue.

christianvoigt commented 6 years ago

good news: I just integrated the official dagre-d3 v0.6.1 successfully in a Vue app. I don't really know what fixed the problems, but I used the new vue-cli (still in beta) to create a completely new boilerplate for my old Vue code and this worked. Maybe the reason is the newer webpack version that comes with it.

So I guess this issue can be closed.

ShawshankLin commented 6 years ago

how to use dagre-d3 in Vue？

zylbiubiubiu commented 6 years ago

how to use dagre-d3 in Vue？

webpack": "1.13.2"

yemanr commented 5 years ago

i find there's no main field in package.json, so import from 'dagre-d3' is import the package's root index.js. there's a build js in the dist, just import this one will fix it. import dagreD3 from 'dagre-d3/dist/dagre-d3';

zhangxiaodong1209 commented 4 years ago

wish a exmple

so2bin commented 4 months ago

i find there's no main field in package.json, so import from 'dagre-d3' is import the package's root index.js. there's a build js in the dist, just import this one will fix it. import dagreD3 from 'dagre-d3/dist/dagre-d3';

This also fixed my problem, dargre-d3 cannot used after yarn build on production. My import code is the following:

And my versoin is:

{
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@soerenmartius/vue3-clipboard": "^0.1.2",
    "axios": "0.21.3",
    "codemirror-editor-vue3": "^0.2.4",
    "dagre-d3": "^0.6.4",
    "echart": "^0.1.3",
    "echarts": "^5.2.2",
    "element-plus": "~2.3.6",
    "js-yaml": "^4.1.0",
    "json-stringify-pretty-compact": "^3.0.0",
    "json-to-pretty-yaml": "^1.2.2",
    "jsonlint-mod": "^1.7.6",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "lodash": "^4.17.21",
    "mitt": "^3.0.0",
    "moment-mini": "^2.22.1",
    "nprogress": "^0.2.0",
    "path": "0.12.7",
    "path-to-regexp": "^6.2.0",
    "tinymce": "4.9.11",
    "vite-plugin-treat-umd-as-commonjs": "^0.1.2",
    "vue": "3.2.26",
    "vue-axios": "^3.2.5",
    "vue-cookies": "^1.7.4",
    "vue-echarts": "^6.0.0",
    "vue-router": "4.0.12",
    "vuex": "4.0.2",
    "xterm": "^4.18.0",
    "xterm-addon-attach": "^0.6.0",
    "xterm-addon-fit": "^0.5.0"
  }
}

dagrejs / dagre-d3

Cannot use dagre-d3 in Vue #320