4.0.0 fails to be parsed by webpack without transpiling

[rj-calvin]

Since upgrading to 4.0.0, webpack fails to parse index.js. It fails on line 66:

ERROR in ${PROJECT}/.yarn/cache/color-npm-4.0.0-ec1e8d2d13-3cafd69201.zip/node_modules/color/index.js 66:16
Module parse failed: Identifier directly after number (66:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 	} else if (typeof object === 'number') {
| 		// This is always RGB - can be converted later on.
> 		object &= 0xFF_FF_FF;
| 		this.model = 'rgb';
| 		this.color = [

My current workaround is to either downgrade to before 4.0.0 or to explicitly transpile color into my target.

Currently using yarn 2.4.0 (berry) and node 16.5.0.

[Qix-]

Duplicate of #204.

[slaweet]

I also had this problem. In a Vue project. I resolved it by adding

transpileDependencies: ['color'],

to my vue.config.js (relevant docs: https://cli.vuejs.org/config/#transpiledependencies)

But I still feel like I should not need to transpile this dependency.

I have ~100 direct dependencies (all of them kept to the latest version with https://renovatebot.com/), thousands of transitive dependencies. I don't have to transpile any of the other dependencies. So think that the industry standard is that npm packages already contain the code transpiled (if needed).

I cannot imagine how slow my build (and dev server) would be if I had to transpile all my dependencies. Also, it's a lot of wasteful computation if the transpilation of color has to run again and again instead of just once during publishing the package. That is a lot of duplicate work, given the weekly downloads stats of color are in order of millions.

All of the above are just my assumptions and intuition, expressed without much understanding of these things (transpilation, modules, etc.). So if I'm missing something, I'm happy to be proven wrong. 🙂

@Qix- I saw the explanation in https://github.com/Qix-/color/releases/tag/4.0.0. Do you have some more details regarding the reasoning to do this change? Maybe a link to some article?

[Qix-]

@slaweet because it's modern and standard Javascript. If your build tools do not support it, don't upgrade major versions.

Please keep discussion on the other issue, please. This is marked as a duplicate.