Loading D3js with StealJS

StealJS
1

Hi,
I’m trying to use d3 v4 in my project. I added it in my package.json as a dependency. I am using StealJS to load modules. After installing via npm, I added the following in my component viewmodel to use d3

import * as d3 from 'd3';

I tried to reload the web app, but I got the following error message in the browser (chrome) console log

Error: Error loading "d3@4.12.2#build/d3.node" at http://192.168.59.103:9001/node_modules/d3/build/d3.node.js
Error loading "d3@4.12.2#build/d3.node" from "app/app" at http://192.168.59.103:9001/app/app.js
SyntaxError: Unexpected token <

I did a bit of research, and added the following ‘paths’ section to my package,json

"steal": {
  "plugins": [
    "steal-css",
    "steal-stache"
  ],
  "paths": {
    "d3": "/node_modules/d3/build/d3.min.js"
  }
},

This solved the problem (i’m not really sure why) when using steal in development mode (not built with steal-tools).

I then tried to build (bundle) it with steal-tools, but the build fails with the following error message

building frontend distribution...
OPENING: app/app
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: Error loading "d3@4.12.2#build/d3.node" at file:/node_modules/d3/build/d3.min.js
Error loading "d3@4.12.2#build/d3.node" from "app/app" at file:/opt/wsp/app/app.js
Could not load 'd3@4.12.2#build/d3.node'
Is this an npm module not saved in your package.json?
(node:1) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Does anyone have any idea how I can get the frontend code to build?

Thanks in advance

Rob

PS, after initially struggling with CanJS v3, I am now finding it a big improvement (IMHO) over CanJS v2, so a big thanks for all the work that you guys put into it.

2

@robfoweraker you might want to use map instead. Try map: {d3: "d3/build/d3.min"}

I think the progressive loading guide covers this here: https://stealjs.com/docs/StealJS.guides.progressive_loading.html#configure-packagejson-for-loading-the-global-justifiedgallery-package

If you’ve never checked out that guide, I strongly encourage it. Covers all the important concepts in stealjs.

3

Hi Justin,

Thanks for the help, this fixed the problem. I created a simple github project that demonstrates using D3js with CanJS and StealJS, to help others.

https://github.com/rob4acre/docker-can3-steal-d3

My next step is to try and understand the progressive loading…

Cheers

Rob

1 Like