Modifying `HTMLElement.prototype.focus` prevents server side rendering

[macdonst]

🐛 Bug Report

Modifying HTMLElement.prototype.focus prevents server side rendering.

I'm using Gatsby to build a site which also uses react-spectrum v3. Running the site in development works but once I do a production build an error occurs preventing the site from being built.

🤔 Expected Behavior

I hope to be able to use react-spectrum v3 with a site that is doing server side rendering. 🤞

😯 Current Behavior

Setup the reproduction scenario:

1. Clone the reproduction repo.
2. cd gatsby-rsv3
3. npm i

Run the client side rendering scenario:

1. gatsby develop

You'll be able to open localhost:8000 and see that the site is running with a @react-spectrum/button.

Now run the server side scenario:

1. gatsby clean
2. gatsby build

This should give you an error message:

  963 |
> 964 |   let focus = HTMLElement.prototype.focus;
      | ^
  965 |
  966 |   HTMLElement.prototype.focus = function () {
  967 |     $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;


  WebpackError: ReferenceError: HTMLElement is not defined

  - module.js:964
    node_modules/@react-aria/interactions/dist/module.js:964:1

  - module.js:1018
    node_modules/@react-aria/interactions/dist/module.js:1018:1

  - module.js:392
    node_modules/@react-aria/focus/dist/module.js:392:22

  - module.js:427
    node_modules/@react-aria/focus/dist/module.js:427:4

💁 Possible Solution

If I find something I'll come back here and update.

🔦 Context

It's keeping us from switching over from react-spectrum v2 on our internal doc site: https://docs.corp.adobe.com/

💻 Code Sample

Sample repo that provides the smallest reproduction scenario I could come up with is at:

https://github.com/macdonst/gatsby-rsv3

🌍 Your Environment

Software	Version(s)
react-spectrum	"@react-spectrum/button": "^3.0.0", "@react-spectrum/provider": "^3.0.0", "@react-spectrum/theme-default": "^3.0.0"
Browser	n/a
Operating System	MacOS 10.15.5

🧢 Your Team

Adobe I/O

🕷 Tracking Issue

n/a

[macdonst]

Was talking with @dannify so I put a guard of:

if (typeof HTMLElement === "object") {
  let focus = HTMLElement.protoptye.focus;
  …
  $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners = true;
}

around the code that was causing the problem and it got me to the next issue:

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  269 |     containerPadding = 12,
  270 |     shouldFlip = true,
> 271 |     boundaryElement = document.body,
      | ^
  272 |     offset = 0,
  273 |     crossOffset = 0,
  274 |     shouldUpdatePosition = true,


  WebpackError: ReferenceError: document is not defined

  - module.js:271 useOverlayPosition
    node_modules/@react-aria/overlays/dist/module.js:271:1

  - module.js:529 $b3e9aa84487f353b5d43baaa685254c$var$PopoverTrigger
    node_modules/@react-spectrum/dialog/dist/module.js:529:25

[icaraps]

Workarounds listed here https://www.gatsbyjs.org/docs/using-client-side-only-packages/

I was able to get a few components like Button working with that but it's still far from ideal.

[RafalFilipek]

Probably related #769

[devongovett]

Should be fixed in #769. I'm sure there are other issues with SSR though. I'm working on setting up a test suite.

[devongovett]

#835 sets up a test harness to ensure all components work in SSR. If you'd like to help contribute tests, it would be appreciated! 😄

[icaraps]

@devongovett Thanks a lot ! For our Gatsby use case, checking if window, document or any client-side global variables are defined will prevent throwing errors during the gatsby build phase but then when running the build in the browser, will the rehydration kick in and run the React Spectrum client-side logic ?
For example, if the Provider scale is set to auto, will it run the window.matchMedia() check to apply medium or large scale styles ?

[icaraps]

@devongovett Thanks for the latest release with SSR support !

[macdonst]

@devongovett This is working great in my Gatsby project so I believe you can close this bug.