SSR

[tgoldenberg]

doesn't appear that this library supports server-side rendering, which is a must for using frameworks like Next.js

Any plans to support this? I wanted to port over from another implementation but will have to wait :/

[bpostlethwaite]

Hi @tgoldenberg sure what would we need to do to support server-side rendering?

[tgoldenberg]

Hey @bpostlethwaite just make sure that it can render on the server!

Right now I believe there are dependencies on window which would not work on the server. You can easily render React to a string for SSR. Can you add some tests that ensure that this works? That would make it much more usable. https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

[bpostlethwaite]

react-plotly.js is a light wrapper around plotly.js. Have you managed to get plotly.js to render on the server?

[tgoldenberg]

@bpostlethwaite kind of... I had a require statement in my render function to instantiate Plotly only if the app was in the browser. Seemed very hacky... I was hoping Plotly's official React implementation would have fixed that, but I guess not.

[bpostlethwaite]

If I understand this correctly then I think the issue is much deeper. The problem is that you can simulate the DOM in Nodejs using JSDOM. JSDOM doesn't implement the SVG API. Plotly.js uses SVG to draw vector graphics. If JSDOM can't render it then Nodejs can't render it. Nothing to do with React at all.

[aulneau]

@tgoldenberg If you have not done so already, I'd recommend you take a look at the dynamic imports section of the next.js readme. I use next.js pretty often and some libraries aren't able to work with SSR. You can still use them in next.js, you would dynamically import the components and have them only render on the client:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), {
  ssr: false
})

export default () =>
  <div>
    <DynamicComponentWithNoSSR />
    <p>HOME PAGE is here!</p>
  </div>

[tgoldenberg]

I believe <svg /> is not the issue, @bpostlethwaite.

Server-rendered React supports the svg component.

I think the issue is the library's reliance on window. and other browser-only APIs.

I love Plotly but because of this issue opted for another chart library which doesn't rely on browser-only APIs. Happy to close this issue, unless someone prefers it to stay open...

[nicolaskruchten]

Sorry that we couldn't be what you needed here... For anyone else stumbling across this issue, though, I'd like to draw a distinction between react-plotly.js being used in an SSR context, which is possible with Next.js for example here https://github.com/aulneau/next.js-with-react-plotly.js but this doesn't actually render the SVG on the server to be shipped to the client as part of the document, which I would characterize as plotly.js being used in an SSR context.

[eric-burel]

Hi, the dynamic import used in this example sounds more like bypassing the issue to me. It's not supporting SSR, it's more playing around with the build system.

By supporting SSR, we do not necessarily mean actually rendering the chart, it's clearly not feasible and does not add value.

The minimum support would simply be not failing during build. As far as I understand, the issue is that importing react-plotly will directly run code that expects window and document to be defined.
Simply deferring the run could be enough for the build to succeed, and then the user can use a NoSsr component to defer render client side.

 (STDERR) ReferenceError: document is not defined
 (STDERR)     at addRelatedStyleRule (/node_modules/plotly.js/dist/plotly.js:104683:17)
 (STDERR)     at Object.addStyleRule (/node_modules/plotly.js/dist/plotly.js:104674:5)
 (STDERR)     at Object.1.../src/lib (/node_modules/plotly.js/dist/plotly.js:72:9)

For the context we try to use Plotly in an isomorphic Meteor application.

Could this issue be reopened so we can discuss about alternate solutions?

[nicolaskruchten]

@eric-burel if you want to open a new issue to kick off a discussion that would be fine :)

[ruby0888]

@eric-burel Did you open a new issue?
We are having a same problem.

[akhmerov]

Linking for findability. There's a related feature request in plotly/plotly.js#5361, and plotly.js seems to be the right place to start with this.

[ravisharma911993]

Facing the same issue.
Getting ReferenceError: window is not defined error on using angular-plotly.js with SSR.