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

Comments

@akhilesh26
Copy link

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

This comment has been minimized.

Copy link
Member

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.

@aulneau

This comment has been minimized.

Copy link

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.

@zoruc

This comment has been minimized.

Copy link

commented Feb 21, 2018

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

@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

This comment has been minimized.

Copy link
Member

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

@nicolaskruchten

This comment has been minimized.

Copy link
Member

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!

@nicolaskruchten

This comment has been minimized.

Copy link
Member

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?

@etpinard

This comment has been minimized.

Copy link
Member

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

@nicolaskruchten

This comment has been minimized.

Copy link
Member

commented Feb 21, 2018

@nicolaskruchten

This comment has been minimized.

Copy link
Member

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 :)

@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

This comment has been minimized.

Copy link

commented Apr 16, 2019

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

@nicolaskruchten

This comment has been minimized.

Copy link
Member

commented Apr 17, 2019

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

@janosh

This comment has been minimized.

Copy link

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?

@nicolaskruchten

This comment has been minimized.

Copy link
Member

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

@janosh

This comment has been minimized.

Copy link

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?

@nicolaskruchten

This comment has been minimized.

Copy link
Member

commented Sep 6, 2019

We haven't built anything like that, no.

@janosh

This comment has been minimized.

Copy link

commented Sep 6, 2019

@nicolaskruchten Thanks for explaining!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.