Issue with latest d3-color version (1.4.0) about d3-color

[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]

Closing as an Angular issue.

[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 )

[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.

[Taytay884]

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

npm install [email protected]

[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

[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:

d3-color/src/color.js

Lines 242 to 264 in 0b12fa0

	define(Rgb, rgb, extend(Color, {
	brighter: function(k) {
	k = k == null ? brighter : Math.pow(brighter, k);
	return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
	},
	darker: function(k) {
	k = k == null ? darker : Math.pow(darker, k);
	return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
	},
	rgb: function() {
	return this;
	},
	displayable: function() {
	return (-0.5 <= this.r && this.r < 255.5)
	&& (-0.5 <= this.g && this.g < 255.5)
	&& (-0.5 <= this.b && this.b < 255.5)
	&& (0 <= this.opacity && this.opacity <= 1);
	},
	hex: rgb_formatHex, // Deprecated! Use color.formatHex.
	formatHex: rgb_formatHex,
	formatRgb: rgb_formatRgb,
	toString: rgb_formatRgb
	}));

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 d0a60ee 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?

[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 ?

[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