search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.9k stars 1.85k forks source link

Native ES6 modules vs. the bundle #3518

Closed oldrich-svec closed 3 years ago

oldrich-svec commented 5 years ago

When plotly.js is loaded in Chrome by the native ES6 import, the loading crashes with Cannot read property 'document' of undefined at line 18178, i.e. at var d3_document = this.document;

The problem is that the bundler assumes that when a function is executed without any this, the this will automatically be set to window. This is not the case with ES6 modules, where this will be undefined.

I fixed it by changing line 27724 from }(); to }.apply(self); but this is just a hack :)

etpinard commented 5 years ago

Thanks for writing in.

When plotly.js is loaded in Chrome by the native ES6 import,

Can you share a reproducible example of how you're going about doing this. Thank you!

oldrich-svec commented 5 years ago

Try:

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="module" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</body>
</html>

or alternatively:

<script type="module">
    import 'https://cdn.plot.ly/plotly-latest.min.js'
</script>
alexcjohnson commented 5 years ago

In a codepen: https://codepen.io/alexcjohnson/pen/aXEbOa?editors=1011

That particular error is with d3v3 - seems like v4 fixes it so we should get it when we leapfrog to v5. Will be interesting to see if there's anything else in our code that uses this to mean the window (or anything else that's incompatible with ES6 modules... I'm not very familiar) but it doesn't seem like there's much point trying before the d3 upgrade.

jmsuresh commented 5 years ago

@oldrich-svec

I fixed it by changing line 27724 from }(); to }.apply(self); but this is just a hack :)

Can you please provide which particular line had to be changed. I am stuck with this for the past two days (tried many things with babel options - nothing worked)

leolorenzoluis commented 5 years ago

Any fix for this?

LRagji commented 5 years ago

Fix for version 1.48.2; the change is at line number 32481 '/node_modules/plotly.js/dist/plotly.js'

wendelstam commented 5 years ago

Anybody know if there is a issue for this filed in the d3 project?

oldrich-s commented 5 years ago

@jmsuresh In this file:

https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.1/plotly.js

search for define(d3). You will find:

if (typeof define === "function" && define.amd) this.d3 = d3, define(d3); else if (typeof module === "object" && module.exports) module.exports = d3; else this.d3 = d3;
}();

Change }(); to }.apply(self);

etpinard commented 5 years ago

From https://github.com/plotly/plotly.js/issues/4130 @Arjun-Shinojiya wrote:

I am trying to integrate plotly.js in my Angular 8 project. I successfully integrated it and tested it in local ,that time it is working fine without any error. But when I check it in live server ,that time I am getting cannot read property 'document ' of undefined error.. I also similar issue blog in this repository.`.I wanted to try this hack changing line 27724 from }(); to }.apply(self); but this is just a hack :) But I dont know in which module file I can get this line.Currently none of the plotly.js file have 27724 lines

Maybe someone here can help.

Arjun-Shinojiya commented 5 years ago

When plotly.js is loaded in Chrome by the native ES6 import, the loading crashes with Cannot read property 'document' of undefined at line 18178, i.e. at var d3_document = this.document;

The problem is that the bundler assumes that when a function is executed without any this, the this will automatically be set to window. This is not the case with ES6 modules, where this will be undefined.

I fixed it by changing line 27724 from }(); to }.apply(self); but this is just a hack :)

@oldrich-svec can you please tell the exact location of the file which you mentioned in this questions last line? .I am facing the same issue.

oldrich-s commented 5 years ago

see https://github.com/plotly/plotly.js/issues/3518#issuecomment-517138019

Arjun-Shinojiya commented 5 years ago

see #3518 (comment)

So I should use plotly.js via CDN in angular 8 right?

oldrich-s commented 5 years ago

@Arjun-Shinojiya it is up to you how you use plotly.js ;). The comment just shows you what line you want to edit.

TravisLRiffle commented 5 years ago

Is editing the line of code the only solution? What happens when I want to upgrade to a new version of plotly? I have to edit it every time?

meriturva commented 5 years ago

@TravisLRiffle yes you have to reapply your hack every time! For me, it is not a solution for enterprise applications.

maxmeyer commented 5 years ago

After fixing this, I got a d3_xhr-not found-error although it's defined

AlanJMac commented 4 years ago

Alternative workaround for Angular 8 upgraders: For those of us coming here having encountered this issue when upgrading to Angular 8, an alternative workaround solution to editing the plotly.js file is to not use the new "Differential Loading by Default" as mentioned in this comment on angular-plotly.js: https://github.com/plotly/angular-plotly.js/issues/75#issuecomment-526871836

I could solve the issue forcing the typescript to be generated as "target": "es5" making it not use the Githubissues.

  • Githubissues is a development platform for aggregating issues.