d3js production build and development bundle

[pYr0x]

i want to use d3js to create charts. i was importing all d3js modules like in my main.js file

import * as d3 from "d3";

using the steal-tools cli steal-tools bundle --deps --minify false or steal-tools --minify false the build is successfully. however if i check the site i get an error: TypeError: Cannot create property 'prototype' on string 'd3-color@1.1.0#build/d3-color'

the error lines are

/*d3-color@1.1.0#build/d3-color*/
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define('d3-color@1.1.0#build/d3-color', ['exports'], factory) : factory(global.d3 = global.d3 || {});
}(this, function (exports) {
    'use strict';
    var define = function (constructor, factory, prototype) {
        ---> constructor.prototype = factory.prototype = prototype; <---
        prototype.constructor = constructor;
    };

any suggestion what is going wrong? using steal "^1.11.5" and steal-tools "^1.11.8"

[matthewp]

Probably this is being detected as an AMD module because the function define is used. You'll want to use meta.format configuration to make it be something else, cjs will likely work.

[pYr0x]

unfortunately it doesn't work.

in "d3-color" some code like this:

define(Color, color, {
  displayable: function() {
    return this.rgb().displayable();
  },
  toString: function() {
    return this.rgb() + "";
  }
});

gets converted into

define('d3-color@1.1.0#build/d3-color', Color, color, {
        displayable: function () {
            return this.rgb().displayable();
        },
        toString: function () {
            return this.rgb() + '';
        }
    });

here is a demo https://github.com/pYr0x/steal-d3

• clone
• npm run deps
• open index.html

[matthewp]

ok, I'll try to take a look soon.

[matthewp]

Ok, took a look at the repo. Couple of things, first the format should be set to cjs not amd. setting to amd causes it to override those define() functions that are no the AMD define.

  "steal": {
    "meta": {
      "d3-color": {
        "format": "amd"
      }
    }
  }

Secondly, you can't configure modules that you don't depend on. So you need to install it as a dep:

npm install d3-color@1.1.0

[matthewp]

Do you think this kind of thing is frequent enough that we should document it some where? Here perhaps? https://stealjs.com/docs/StealJS.configuration.html

[pYr0x]

@matthewp thanks, that was the problem. i think we should create a "troubleshooting" page. there we can put some other stuff like

• https://stealjs.com/docs/StealJS.using-npm-packages.html#troubleshooting-troublesome-packages
• explain so error messages https://stealjs.com/docs/StealJS.error-messages.html#mismatched-package-version

cc @justinbmeyer