Sp-dev-docs: Compatibility with dagre-d3

[dkorolev1]

Category

• [ x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article

Hi,

There is a cool library dagre-d3 that allows you to render graphs with d3.js. If I create a new project and add it there (_npm i dagre-d3_) everything works as expected. At the same time, as soon as I try to add this lib to my SPFx project, it does not work. I have the following error:

dagre_d3.graphlib.Graph is not a constructor

But, as I said before this code works well outside the Spfx project. I have this error when I try to use the basic functionality of this lib (create a new graph). Something like:

var graph = new dagreD3.graphlib.Graph();

So, as I understand the problem is related to the bundling, but I do not have any ideas how it can be fixed. If you have any ideas about this issue, please let me know.

Thanks.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[StfBauer]

Your problem is not specifically SPFx related it is related to TyypeScript.

The library you installed does not come with any TypeScript type definitions. You should at least install those first:
https://www.npmjs.com/package/@types/dagre-d3

npm install --save @types/dagre-d3

This should solve at least potentially resolve the solution with:

dagre_d3.graphlib.Graph is not a constructor

[dkorolev1]

@StfBauer, yes, thanks for your answer. TS definitions are installed in my solution.

[StfBauer]

@dkorolev1 You also added your external library to the config?
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library

Are you able to share a sample project?

[dkorolev1]

@StfBauer , of course it will work if I add this lib as external resource, but I do not want to store it as a external resource. I would like to add it directly to the project. You can create a new project with yeoman, add this lib and try some basic functionality, like

var graph = new dagreD3.graphlib.Graph();

But if you want I can share a project. Do you want me to do that?

Thanks for your help.

[StfBauer]

The NPM package you have installed are only for your development. When you like to use the final and bundled web part in SharePoint you need to webpack this library as an external resource in your solution file or derive it from a CDN. Both possible but for that the external resources are needed.

Otherwise, your solution won't work. SharePoint and SPFx are in general not aware of what third-party library you want to use and cannot provide all available libraries.

[dkorolev1]

@StfBauer , ok, thanks.

But, could you please clarify some points for me. For example, if I want to use some external library in my SPFx solution, let's say d3.js. Everything I need to do is to add this lib (npm install d3) and that's it, now I can use it. And what I'm trying to understand is why I can add this lib (d3.js) and everything works well, but whenever I add darge-d3 it doesn't work. Perhaps there are problems with the bundle or something else. I do not know exactly and just try to understand.
It would be great if you could explain.

Thank you!

[hugoabernier]

@StfBauer , of course it will work if I add this lib as external resource, but I do not want to store it as a external resource. I would like to add it directly to the project. You can create a new project with yeoman, add this lib and try some basic functionality, like
var graph = new dagreD3.graphlib.Graph();
But if you want I can share a project. Do you want me to do that?
Thanks for your help.

@dkorolev1 I'm actually in the process of putting together a sample web part using D3. If you'd like to share your code, I can take a look at it.

[StfBauer]

@StfBauer , ok, thanks.

But, could you please clarify some points for me. For example, if I want to use some external library in my SPFx solution, let's say d3.js. Everything I need to do is to add this lib (npm install d3) and that's it, now I can use it.

No. You can only use it during development because the library only exists in your development runtime. When you finished your work and 'gulp bundle' and 'gulp package-solution' the npm package does not end up in the final bundle. To make it available in the SPPKG file you need to reference it as an external library.

This external library could be taken directly from the NPM package. Meaning that everything defined as an external library will be copied during the bundle and package-solution process in the final SPPKG file.
Load libraries from CDN
Again you need to define your d3.js and all other libraries as external libraries but instead pointing to your node_modules you point to an Url.

And what I'm trying to understand is why I can add this lib (d3.js) and everything works well, but whenever I add darge-d3 it doesn't work. Perhaps there are problems with the bundle or something else. I do not know exactly and just try to understand.
It would be great if you could explain.

@hugoabernier Great that you jump on this. Appreciate it.

Thank you!

[dkorolev1]

@hugoabernier

Here is a test project.
And this line causes an error.

@StfBauer So, in general, as I understand it, the external library (from node_modules) will be packaged into the final SPPKG file and the library from CDN (added to the externals section in the config.json) won't be packgaed into the final SPPKG file. Is that correct?

[StfBauer]

@dkorolev1 Yes exactly that is the way things work.

[dkorolev1]

@StfBauer , ok, in this case, now my goal is to make it work with this library marked as external (located in node_modules).

[hugoabernier]

@dkorolev1 I have tested your project and found that the issue isn't with your code or how you import it. It appears to be with dagre-d3. I've submitted a PR in your project to demonstrate the issue.

I'd recommend you create an issue with the dagre-d3 folks.

Best of luck!

[msft-github-bot]

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open the issue.