Issue with latest d3-color version (1.4.0)

[sriharshayedlapalli]

Hi Mike,

Application was working fine until the new release of d3 color version(1.4.0). As soon as this new version has come, kubernetes started failing with below mentioned error where as same code is working fine in local. After lot of research we could identify the issue and as an interim fix we are overriding with older version "1.3.0" and it is working fine now. Request you to extend your help on this.

https://github.com/d3/d3-color

[mbostock]

Can you share some code that reproduces the error? I can’t investigate from a stack trace or error message alone.

[naveenrk]

Hi @mbostock ,

I am using d3 5.7.0 version and internal dependency package d3-color has got updated to 1.4.0 , after this update i am getting the same issue as mentioned above by @sriharshayedlapalli .

@mbostock please let us know the fix for the issue.

[goldieswx]

Hi,

Same here. New update of d3-color (1.4.0) breaks my angular 7 app. The production build (--prod) does compile successfully but the app breaks and shows the OP message, it does however work with the dev build.

As a temp fix I reverted to 1.3.0 in the package.json.

[mbostock]

Thank you for the error reports. No one has yet provided a reproduction of this error, and thus I have no way of investigating. If this error is happening to you, please share a minimal reproduction so that we can determine the cause. Thank you.

[sergidt]

Same error for me.

is easy to reproduce:

1. create any angular project (with angular cli)
2. install d3
3. use d3-color -> rgb function, importing it like this: import {rgb} from 'd3-color';
4. build the application using ng build --prod
5. the resulting application is broken. Where the rgb function is used will produce the error shown above.

If you need more detail I can help you to configure a workspace.

[mbostock]

Are you installing d3 and then importing from d3-color? You should install d3-color if you want to import from d3-color.

I tried using the angular cli to reproduce this example, but I’ve never used Angular before, so while I was able to create a blank Angular project, I don’t know which files to edit, or how, to reproduce the problem. Sorry.

[sergidt]

@mbostock I need d3 in order to make graphical representations. Once I install d3, all related libraries are installed (d3-color, d3-*,...). I can see all of them in my node_modules. I was working under this way with no problem. When d3-color 1.4.0 has been released I started to get this error.

The next hours I will prepare a playground to experiment this error.

[goldieswx]

Hi Mike

I uploaded an empty angular project with a basic d3 import (check app.component.ts) (https://github.com/goldieswx/d3color-angular.git)

Should you either serve it or build using the prod argument. ng serve --prod ng build --prod

Then the resulting app should crash with the OP stack trace

[Edit] I included the dist folder with the prebuilt app. PS : It's always a pleasure to read your articles

[dpinol]

Hi, for me it fails only when optimizing the build (having "optimization=true" at angular.json). Maybe due to the uglification?

[sergidt]

Yes @dpinol but optimization is "required" when building for production

[greenleaf72]

Hello, Using Angular 7.1.2, I have the same problem as sergidt. It seems that instead of the object color, only the property in hexadecimal is present.

Uncaught TypeError: e.rgb is not a function

[Ludo83]

Hi, it seems that the issue comes from "@angular-devkit/build-optimizer".

By keeping "optimization=true" and passing "optimization=false", the issue doesn't appear anymore.

Upgrading Angular version (tried with "8.2.8") also upgrades "@angular-devkit/build-optimizer" and solves that (we can still keep "optimization=true" and "optimization="true" without generating this issue).

So the problem came from "@angular-devkit/build-optimizer" but not D3.

I think that this issue could be closed.

[mbostock]

@sergidt What I meant is that you should either do this:

npm install d3-color

import {rgb} from "d3-color";

Or do this:

npm install d3

import {rgb} from "d3";

Never this:

npm install d3

import {rgb} from "d3-color";

[mbostock]

Thanks for the reproduction @goldieswx. As I see it, that code appears to be be missing these lines from color.js:

https://github.com/d3/d3-color/blob/0b12fa0d5906dddf34acfbdd2158b1d43953f285/src/color.js#L242-L264

Hence, the entire Rgb class is missing all its methods, not just rgb.rgb().

Is the Angular optimization interpreting the sideEffects: false flag added in d0a60ee60f824d6d29ea8be0dfb1fc85e812a184 differently? This was added as part of d3/d3#3131, under the interpretation that a package (such as d3-color) does not have side-effects as long as it does not modify anything outside of its package. Of course the modification of Rgb.prototype inside the color.js file is a side-effect, but it’s modifying something that was defined in the file itself, so it should be fine.

This appears to be an Angular issue.

[sergidt]

Can I use any alternative function similar to rgb?

[mbostock]

No, the code is broken by Angular’s optimizer; my guess is that your only option is disabling the optimizer. Reading angular/angular-cli#11439, it seems to be a known issue that Angular’s optimizer breaks libraries.

[mbostock]

Closing as an Angular issue.

[greenleaf72]

Hi, @sergidt check @Ludo83 answer, this is how we fixed the issue.

[sergidt]

Ok, thanks mates

[antoinedepardailhantc]

Having same issue just appearing on 2 different angular projects : one in 7.xxx and other one on 8.xxx.

Both having the same issue using interpolateLab function. Doesn't that prove it's a d3 issues and not angular ?

[swordensen]

This issue is closed but, i figured i'd share for anyone else running into this that updating angular/cli via ng update worked. ( as suggested by @alan-agius4 )

[simplecodeexamples]

Hi, it seems that the issue comes from "@angular-devkit/build-optimizer".

By keeping "optimization=true" and passing "optimization=false", the issue doesn't appear anymore.

Upgrading Angular version (tried with "8.2.8") also upgrades "@angular-devkit/build-optimizer" and solves that (we can still keep "optimization=true" and "optimization="true" without generating this issue).

So the problem came from "@angular-devkit/build-optimizer" but not D3.

I think that this issue could be closed.

After searching whole day here and there this solution worked for me. Thanks a lot

[Taytay884]

Hi, I have just downgraded d3 to 4.13.0 and it works.

npm install d3@4.13.0