[@theme-ui/match-media] Breaks gatsby builds due to undefined window

[joestrouth1]

Using @theme-ui/match-media's useResponsiveValue hook in Gatsby causes the build to fail, due to its use of window.matchMedia.

I'd normally add a typeof window === 'undefined' check, but am not allowed to conditionally call a hook. Is there an alternative userland solution for this that I'm not thinking of?

I could add the check to the hook - is returning breakpoints[0] a sensible default?

[dburles]

It's a bit tricky on the server. I don't think it would ideal to use 0 as the default, since it might result in some unexpected re-rendering as the page is loaded on larger screen sizes. Perhaps instead we could let the user provide their own index for the server. If none is provided and the hook is called on the server, throw an error stating that they must provide one.

As an example of a solution a user might implement to provide default value, Material UI recommends taking a guess based on the user agent https://material-ui.com/components/use-media-query/#server-side-rendering

[jxnblk]

I haven't had time to look into this yet, but if the window object is only accessed in a useEffect hook, it shouldn't affect static rendering, right?

[joestrouth1]

It shouldn't, though window is also accessed in useCallback. The PR stops that access during static rendering and that was enough to get my site to build.

I'm not sure how to simulate the absence of window in order to test this.

[dburles]

@joestrouth1 PR Looks good. Try set the test environment to node for that test https://jestjs.io/docs/en/configuration.html#testenvironment-string

[joestrouth1]

@dburles The docs say:

By adding a @jest-environment docblock at the top of the file, you can specify another environment to be used for all tests in that file

I could not find a way to set the test environment for that test only.

Moved the test to its own file ssr.js and set the environment but @testing-library/react's render function relies on document. None of the options it accepts helped. Tried to test the functions themselves outside of a rendered component, but the Rules of Hooks didn't like that.

Surely someone else has needed to simulate the absence of window so I'll keep looking for a solution.