react-plotly.js not working with node in SSR context about react-plotly.js HOT 16 CLOSED

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

from react-plotly.js.

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.

from react-plotly.js.

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

from react-plotly.js.

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

from react-plotly.js.

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

from react-plotly.js.

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

from react-plotly.js.

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

from react-plotly.js.

@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

from react-plotly.js.

from react-plotly.js.

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

from react-plotly.js.

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

from react-plotly.js.

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?

from react-plotly.js.

@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

from react-plotly.js.

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?

from react-plotly.js.

We haven't built anything like that, no.

from react-plotly.js.

@nicolaskruchten Thanks for explaining!

from react-plotly.js.