Color dependencies cause initial import to break

[mtgraves]

The newest versions of your dependencies color-alpha, color-normalize, color-parse, and color-rgba cause me to not even be able to import plotly into my react apps via:

import Plotly from “plotly.js”;

The error thrown is “Typeerror: rgba is not a function”.

When I roll back to a last known working set of these deps (based on another recent react project) I do not experience this and the plotly library works fine.

Working versions:
color-alpha 1.0.4
color-normalize: 1.5.0
color-parse: 1.3.8
color-rgba: 2.1.1

Newest versions of the above cause initial import issue as described above.

[archmoj]

Which version of plotly.js you are using?

[mtgraves]

Which version of plotly.js you are using?

1.55.2

[archmoj]

v1.56.0 is just out.
Could you please upgrade and see if the problem insists?

[mtgraves]

v1.56.0 is just out.
Could you please upgrade and see if the problem insists?

Just upgraded and yes the problem persists.

[archmoj]

A couple of questions:
What is last version of plotly.js that works fine for you?
Have you tried using plotly.js-dist which has no dependency? https://www.npmjs.com/package/plotly.js-dist

[matthiaskoenig]

Having the same issues within a vue app.

[archmoj]

Having the same issues within a vue app.

Which plotly.js version you could use without a problem?

[mtgraves]

It’s not the plotly version. It’s the version of those color dependencies I mentioned in the original post. They have changed something about their libraries which breaks plotly.

[archmoj]

Could you please tell us more about the error message e.g. line number or other info that could help us debug?

[matthiaskoenig]

I can confirm that. Immediatly after the color updates my build broke on the weekend.
Fixed it by fixing

    "color-normalize": "1.5.0",
    "color-rgba": "2.1.1",
    "color-parse": "1.3.8",

With the 1.56 release this broke again. So workaround for now is

    "color-normalize": "1.5.0",
    "color-rgba": "2.1.1",
    "color-parse": "1.3.8",
    "plotly.js": "1.55.2",

[archmoj]

@dy any idea what the source of the problem is?

[archmoj]

@matthiaskoenig on your repo could you replace plotly.js with plotly.js-dist "v1.56.0" which has no dependency?

[dy]

color-* modules now support native ESM entries, as well as commonjs. That in some reason causes troubles in plotly browserify pipeline, which is unexpected. I suspect that is react app webpack config trouble - in some reason that switched to ESM entry and treats it wrong. Some insight to the problem webpack/webpack#4674

…

On Wed, Sep 30, 2020 at 8:49 PM Mojtaba Samimi ***@***.***> wrote: @matthiaskoenig <https://github.com/matthiaskoenig> on your repo could you replace plotly.js with plotly.js-dist "v1.56.0" which has no dependency? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5182 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACJII55CJFWFHD4E2PM643SIPG3HANCNFSM4R7QJA3Q> .

[archmoj]

color-* modules now support native ESM entries, as well as commonjs. That is some reason cause troubles in plotly browserify pipeline, which is unexpected.
…
On Wed, Sep 30, 2020 at 8:49 PM Mojtaba Samimi @.***> wrote: @matthiaskoenig https://github.com/matthiaskoenig on your repo could you replace plotly.js with plotly.js-dist "v1.56.0" which has no dependency? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5182 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACJII55CJFWFHD4E2PM643SIPG3HANCNFSM4R7QJA3Q .

@dy Thanks for the insight.
Are you going to address this issue in color* dependencies?
Or you suggest downgrading (pinning down the versions) for now?

[dy]

@archmoj definitely I can publish fix if you help reproducing the bug, not 100% sure what causes webpack to load mjs instead of cjs, plotly uses require.

[dy]

Ok, I see the problem. Webpack uses module entry from package.json, even if dependency was required, not imported, ignoring package.exports directive. That should be fixed in coming webpack / create-react-app versions.
Plotly.js uses lib/index.js as main entry in package.json, which is unbundled raw source. That way, whoever uses webpack to import Plotly from 'plotly.js' basically bundles the whole Plotly.js from source, which is great overhead and not guaranteed to be compatible with browserify pipeline used by plotly (in fact that's the reason of the bug).

What I'd propose - retargeting "main" to "dist/plotly.js", that is a standard practice:

  ...
  "main": "dist/plotly.js",
  "browser": "dist/plotly.js",
   // not supported
   // "module": "dist/preact.module.js",
  "umd:main": "dist/plotly.js",
  "unpkg": "dist/plotly.js",
  "source": "lib/index.js",
  ...

[matthiaskoenig]

on your repo could you replace plotly.js with plotly.js-dist "v1.56.0" which has no dependency?

@archmoj Unfortunately, this is not an option, because I have plotly only as an indirect dependency.
I.e. I am using vue-plotly which depends on plotly.js.

[mtgraves]

Same here except I’m using react-plotly.js so that won’t work for me either. I noticed you changed your readMe npm install instructions to the -dist one...is that just a placeholder until this gets sorted out?

[alexcjohnson]

What if in the plotly.js source we simply change
var rgba = require('color-normalize');
into
var rgba = require('color-normalize/index.js');
Would that force the previous behavior?

[alexcjohnson]

Though... the color modules reference each other so I guess even if this would fix the reference in the plotly.js source we'd also need to change those internal references.

[dy]

I have published color-* packages with "browser" field, that's supposed to take precedence over "module" in webpack. Can you please bump deps and see how it goes - tested in codesandbox, seems to resolve fine.

[matthiaskoenig]

@dy Thanks. This fixes the issue with vue-plotly.
Working with

+-- @statnett/[email protected]
| +-- [email protected]
| `-- [email protected]
...
|   +-- [email protected]
|   | +-- [email protected] deduped
|   | `-- [email protected] deduped
|   +-- [email protected]
|   | +-- [email protected]
|   | | `-- [email protected]
|   | `-- [email protected]
|   |   +-- [email protected]
|   |   `-- [email protected]
|   |     `-- [email protected]

[mtgraves]

Excellent thank you guys for the quick turnaround on this. Confirmed working. I’m closing the issue.

[alexcjohnson]

Glad this works! But let's let #5189 close it on merge.

[archmoj]

@mtgraves and @matthiaskoenig
FYI - plotly.js v1.57.0 is just out: https://github.com/plotly/plotly.js/releases/tag/v1.57.0
Would you mind testing if upgrading could help solve the recent webpack build issue?
Thank you!

[matthiaskoenig]

@archmoj I just tested this with plotly.js v1.57.0 and everything works for me. Don't have to pin any dependencies.
Best M

[archmoj]

@archmoj I just tested this with plotly.js v1.57.0 and everything works for me. Don't have to pin any dependencies.
Best M

Thanks @matthiaskoenig for testing this out.