Exception during server-side rendering

[Milind Ganjoo]

After PR #26, which applies styles on first render, my Gatsby website build process fails with the exception:

failed Building static HTML for pages - 5.299s
error "document" is not available during server side rendering.

   8 | // extracted into a separate module so it's easier to mock with Jest
   9 | function getWindowHeight() {
> 10 |   return document && document.documentElement && document.documentElement.clientHeight || window.innerHeight;
     | ^
  11 | }
  12 | 
  13 | var _default = getWindowHeight;


  WebpackError: ReferenceError: document is not defined
  
  - getWindowHeight.js:10 getWindowHeight
    node_modules/react-div-100vh/lib/getWindowHeight.js:10:1
  
  - Div100vh.js:63 new Div100vh
    node_modules/react-div-100vh/lib/Div100vh.js:63:1

This is because the code to compute window height is now called in the constructor instead of at mount time, which means it runs during SSR builds as well, where window and document are not defined.

The usual solution to this would be to check if window is defined in getWindowHeight (this is the approach Gatsby docs suggest), but this would fail the assertions in convertStyle, so those assertions would need to be removed.

Another approach is to only call convertStyle in the constructor if the DOM is available (by doing the window check above), but then we'd have to call the method again in componentDidMount anyway in order to be isomorphic. This seems to be the preferable approach.

Happy to put up a PR based on guidance.

[Jordi Tarrida]

Hi, thanks for reporting this, I just ran into the same issue. Just wanted to point out I can't fix it following the "Fixing third-party modules" instructions on the Gatsby docs. I downgraded to 0.3.5 for the time being.

[tinder-kyleboss]

#28 was aimed at solving this issue, but it appears to hide the issue as opposed to fix it. Server-side rendered front-ends will now have a default height of 0. This will take some more thinking to figure out how to fix this. I recommend re-opening this issue.

[Milind Ganjoo]

I think this might be fixable by calling updateStyle() in componentDidMount().

[Michael Vasin]

I reverted both #26 and #28 for now and published that as react-div-100vh@0.3.8.

Let's come up with a fix that will include changes made in #26 AND will also properly cover the SSR troubles we encountered.

[Michael Vasin]

Hi all! I published react-div-100vh@0.4.0-beta.1 that should address the issue. Could kindly try it out and share if it works for you?

[Michael Vasin]

Since react-div-100vh@0.4.0 is released which should fix the issue, I'm closing it.