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

[akhilesh26]

[email protected] 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! [email protected] start: node ./lib/server/app.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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]

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]

@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]

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

[nicolaskruchten]

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]

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

[nicolaskruchten]

@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]

@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]

Well SSR should work for react-plotly.js inasmuch as it should render its div server-side without error at least... that wouldn't cause plotly.js to render its output server-side though of course :)

…

On Wed, Feb 21, 2018 at 17:14 Étienne Tétreault-Pinard < ***@***.***> wrote: @aulneau <https://github.com/aulneau> I think it should be possible for SSR to work with this library. Really?!? How? ------------------------------ Using jsdom can get you close (see example <https://gist.github.com/etpinard/bee7d62b43b6bb286950> 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 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#40 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMbA1LgVAtZ0FKd0qOKx2knTPZKO1NWks5tXJVJgaJpZM4SFFsj> .

[nicolaskruchten]

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

[mtm-mouadh]

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

[nicolaskruchten]

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

[janosh]

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]

@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]

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]

We haven't built anything like that, no.

[janosh]

@nicolaskruchten Thanks for explaining!