react-overlays icon indicating copy to clipboard operation
react-overlays copied to clipboard

ownerDocument throws when server rendering

Open MatthewHerbst opened this issue 6 years ago • 4 comments

This library makes use of the ownerDocument tool:

import ownerDocument from 'dom-helpers/ownerDocument';

This tool will throw when called on the server since it accesses the document object which does not exist on the server.

This is causing our server to 500 Internal Server Error when trying to server render a page with a react-big-calendar component. The full stack trace is:

ReferenceError: document is not defined (Most recent call first)
at ownerDocument (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\node_modules\dom-helpers\ownerDocument.js line 7 col 39)
at resolveRef (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\utils\useWaitForDOMRef.js line 13 col 56)
at <unknown> (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\utils\useWaitForDOMRef.js line 22 col 11)
at ya (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 26 col 263)
at Object.useState (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 29 col 81)
at useState (D:\home\site\wwwroot\node_modules\react\cjs\react.production.min.js line 23 col 311)
at useWaitForDOMRef (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\utils\useWaitForDOMRef.js line 21 col 38)
at Object.render (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\Overlay.js line 53 col 51)
at a.render (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 43 col 59)
at a.read (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 41 col 57)

If this library intentionally does not support server-side rendering I will report this in react-big-calendar instead.

MatthewHerbst avatar Oct 08 '19 00:10 MatthewHerbst

Where specifically is this getting called?

taion avatar Oct 08 '19 00:10 taion

interesting...the usages here in useWaitForDOMRef seem properly guarded unless i'm missing something: https://github.com/react-bootstrap/react-overlays/blob/24f7f518390f055c8832a4f61b9c2e62af511649/src/utils/useWaitForDOMRef.js#L5

jquense avatar Oct 08 '19 01:10 jquense

I'm not sure either (or I would have sent a PR heh). It seems safe to me. It's unclear how it could pass that check and then fail.

I haven't seen additional errors come in so it doesn't seem to happen consistently. I will report back if we see another one of these, and I'll try and get some server diagnostics if it happens again.

MatthewHerbst avatar Oct 08 '19 03:10 MatthewHerbst