Plotly.js: Color dependencies cause initial import to break
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.
mtgraves
All 27 comments
Which version of plotly.js you are using?
archmoj
on 30 Sep 2020
Which version of
plotly.jsyou are using?
1.55.2
mtgraves
on 30 Sep 2020
v1.56.0 is just out.
Could you please upgrade and see if the problem insists?
archmoj
on 30 Sep 2020
v1.56.0 is just out.
Could you please upgrade and see if the problem insists?
Just upgraded and yes the problem persists.
mtgraves
on 1 Oct 2020
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
archmoj
on 1 Oct 2020
Having the same issues within a vue app.
matthiaskoenig
on 1 Oct 2020
Having the same issues within a vue app.
Which plotly.js version you could use without a problem?
archmoj
on 1 Oct 2020
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.
mtgraves
on 1 Oct 2020
Could you please tell us more about the error message e.g. line number or other info that could help us debug?
archmoj
on 1 Oct 2020
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",
@dy any idea what the source of the problem is?
archmoj
on 1 Oct 2020
@matthiaskoenig on your repo could you replace plotly.js with plotly.js-dist "v1.56.0" which has no dependency?
archmoj
on 1 Oct 2020
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 https://github.com/webpack/webpack/issues/4674
On Wed, Sep 30, 2020 at 8:49 PM Mojtaba Samimi notifications@github.com
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
https://github.com/plotly/plotly.js/issues/5182#issuecomment-701722242,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACJII55CJFWFHD4E2PM643SIPG3HANCNFSM4R7QJA3Q
.
dy
on 1 Oct 2020
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?
archmoj
on 1 Oct 2020
@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
on 1 Oct 2020
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",
...
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.
matthiaskoenig
on 1 Oct 2020
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?
mtgraves
on 1 Oct 2020
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
on 1 Oct 2020
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.
alexcjohnson
on 1 Oct 2020
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.
dy
on 2 Oct 2020
@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]
Excellent thank you guys for the quick turnaround on this. Confirmed working. I’m closing the issue.
mtgraves
on 2 Oct 2020
Glad this works! But let's let #5189 close it on merge.
alexcjohnson
on 2 Oct 2020
@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!
archmoj
on 16 Oct 2020
@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
matthiaskoenig
on 16 Oct 2020
@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.
archmoj
on 16 Oct 2020
Related issues
jonmmease
·
3Comments
pynklu
·
3Comments
maxwell8888
·
3Comments
empet
·
3Comments
danielsamuels
·
3Comments
Most helpful comment
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.