Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-plotly.js not working with node in SSR context #40

Closed
akhilesh26 opened this issue Feb 14, 2018 · 16 comments
Closed

react-plotly.js not working with node in SSR context #40

akhilesh26 opened this issue Feb 14, 2018 · 16 comments

Comments

@akhilesh26
Copy link

@akhilesh26 akhilesh26 commented Feb 14, 2018

bbsite@0.0.0 start /home/username/project
node ./lib/server/app.js

/home/username/project/node_modules/plotly.js/src/lib/is_plain_object.js:19
if(window && window.process && window.process.versions) {
^

ReferenceError: window is not defined
at isPlainObject (/home/mastcoder/metabrainz/bookbrainz-site/node_modules/plotly.js/src/lib/is_plain_object.js:19:5)
at overrideAll (/home/mastcoder/metabrainz/bookbrainz-site/node_modules/plotly.js/src/plot_api/edit_types.js:123:12)
at Object. (/home/mastcoder/metabrainz/bookbrainz-site/node_modules/plotly.js/src/components/colorbar/attributes.js:17:18)
at Module._compile (module.js:641:30)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object. (/home/username/project/node_modules/plotly.js/src/traces/scatter/attributes.js:13:21)
at Module._compile (module.js:641:30)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bbsite@0.0.0 start: node ./lib/server/app.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bbsite@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/username/.npm/_logs/2018-02-14T10_21_38_925Z-debug.log

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Feb 14, 2018

I'd be happy to help you with this if I could get a few more details about how you're using the library, bundling it, serving it etc. We successfully use this library with React 16.2.0 in e.g. the https://github.com/plotly/react-plotly.js-editor project so I doubt the issue is with the React version per se.

Loading

@aulneau
Copy link

@aulneau aulneau commented Feb 14, 2018

@akhilesh26 are you by chance using server side rendering at all? node ./lib/server/app.js, if that is the case, the error: ReferenceError: window is not defined would make sense because there is no global window object on the server.

I've run into that issue before using various libraries and packages with SSR that don't support it. A possible fix would be to prevent the components from being loaded on the server, and only load them on the client. I use next.js a lot and they have baked in a dynamic import solution that solves this.

Loading

@zoruc
Copy link

@zoruc zoruc commented Feb 21, 2018

I have this same issue, im doing server side rendering with react 16.2

Loading

@nicolaskruchten nicolaskruchten changed the title react-plotly.js not working with react-16.2.0 (SSR) react-plotly.js not working with react-16.2.0 Feb 21, 2018
@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Feb 21, 2018

Basically this library doesn't support SSR at the moment, so it's nothing to do with the React version per se :) see also #21

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Feb 21, 2018

Upon further discussion with @aulneau I think it should be possible for SSR to work with this library... stay tuned for a fix!

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Feb 21, 2018

@etpinard it seems that this line is causing a problem with SSR: https://github.com/plotly/plotly.js/blob/master/src/lib/is_plain_object.js#L19 ... would it be possible to change to use typeof instead?

Loading

@etpinard
Copy link
Contributor

@etpinard etpinard commented Feb 21, 2018

@aulneau I think it should be possible for SSR to work with this library.

Really?!? How?


Using jsdom can get you close (see example and maybe closer now using the latest jsdom version), but you can expect plotly.js to work in outside of browser-like environments at the moment.

For more on the topic, see:

https://github.com/plotly/plotly.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+jsdom

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Feb 21, 2018

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Mar 5, 2018

It seems that something like https://github.com/aulneau/next.js-with-react-plotly.js is the best we can do at the moment for SSR using this component. @etpinard you're right that this is a thornier problem than I anticipated :)

Loading

@nicolaskruchten nicolaskruchten changed the title (SSR) react-plotly.js not working with react-16.2.0 react-plotly.js not working with node in SSR context Mar 7, 2018
@mtm-mouadh
Copy link

@mtm-mouadh mtm-mouadh commented Apr 16, 2019

Is there a solution to this problem ? plotly.js and next.js ??

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Apr 17, 2019

No, there is no known way to integrate these together.

Loading

@janosh
Copy link

@janosh janosh commented Sep 6, 2019

this is a thornier problem than I anticipated :)

@nicolaskruchten Out of curiosity, could you explain what makes SSR support in react-plotly.js hard to implement?

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Sep 6, 2019

@janosh yes: plotly.js uses many browser APIs while rendering, which are very hard if not impossible to make available in an SSR environment. For example, it adds SVG elements to the DOM and then queries browser APIs for bounding boxes, and that sort of thing. In addition, certain trace types open WebGL contexts, which are also difficult to make available outside of a browser.

Our standard solution to headless rendering is a system called Orca which solves this problem the hard way by wrapping up a browser in an Electron app and handles the rendering that way: https://github.com/plotly/orca

Loading

@janosh
Copy link

@janosh janosh commented Sep 6, 2019

Ah yes, I've used Orca in Python for saving plots to files. So there's no addon or plugin like Orca for plotly.js to enable SSR?

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Sep 6, 2019

We haven't built anything like that, no.

Loading

@janosh
Copy link

@janosh janosh commented Sep 6, 2019

@nicolaskruchten Thanks for explaining!

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants