Error building gatsby.js, requestAnimationFrame is not defined

[ajsb85]

Example demo to replicate the issue:

import React from "react"
import {Provider, defaultTheme, Button} from '@adobe/react-spectrum';

export default function Home() {
  return (
    <Provider theme={defaultTheme}>
      <Button variant="cta" onPress={() => alert('Hey there!')}>
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}

gatsby build

failed Building static HTML for pages - 3.096s

 ERROR #95313

Building static HTML failed

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


  478 |
  479 | let $ea7b4dd250709a616043c0e9cf5f62a$var$fixTs = false;
> 480 | requestAnimationFrame(function (t) {
      | ^
  481 |   $ea7b4dd250709a616043c0e9cf5f62a$var$fixTs = t > 1e12 !== $ea7b4dd250709a616043c0e9cf5f62a$var$getTime() > 1e12;
  482 | });
  483 |


  WebpackError: ReferenceError: requestAnimationFrame is not defined

  - module.js:480
    node_modules/@react-stately/virtualizer/dist/module.js:480:1

  - module.js:1
    node_modules/@react-stately/layout/dist/module.js:1:1

  - module.js:1
    node_modules/@react-spectrum/listbox/dist/module.js:1:1

  - module.js:1
    node_modules/@adobe/react-spectrum/dist/module.js:1:1

  - index.js:1
    src/pages/index.js:1:1

[devongovett]

Hey thanks for reporting this! SSR support is an area we’re actively working on. We’ve just started a test suite to ensure we catch all of these issues that result from running in a non-DOM environment. See #835. If you’d like to contribute tests/fixes for these issues it would be greatly appreciated! 😃