fix: Uncaught Error: document is not defined for SSR (#7926)

[LisaRyrholm]

Fix error when window is set but document is undefined when running SSR.

Closes #7926

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Add window = {} in the ssrWorker.js file (see image)

Run yarn test:ssr and verify that everything works even with the window added in the SSRWorker.
Try to undo the change in useFocusVisible.ts and verify that most of the SSR tests crashes with the error Uncaught Error: document is not defined.

This test only works for latest react. And will be crashing the test suite for react 16 and 17. Therefore I have not modified the test permanently.

🧢 Your Project:

[snowystinger]

Thanks for the PR, excited to have better in-test support for this issue so we catch it earlier.

Can you sign the CLA? https://react-spectrum.adobe.com/contribute.html#contributor-license-agreement

It looks like the ssr tests are failing for React 16 and 17, we'll need to fix those as well.

Thanks again!

[LisaRyrholm]

Thanks for the PR, excited to have better in-test support for this issue so we catch it earlier.

Can you sign the CLA? https://react-spectrum.adobe.com/contribute.html#contributor-license-agreement

It looks like the ssr tests are failing for React 16 and 17, we'll need to fix those as well.

Thanks again!

I have now signed the CLA. Thank you for your reply. I am looking forward for this to be merged.

[LisaRyrholm]

Please let me know if there is anything else I can help out with.

[snowystinger]

Just the tests for 16/17 that need some debugging as well if you have time. Thank you!

[LisaRyrholm]

I can have a look at it. But one question. How do I trigger the tests for 16 and 17 correctly locally?

[snowystinger]

Sure, you run them by installing the dependencies for that react version and then just run the tests as normal.
We added a script target to help with this.

yarn install-17
yarn test

[LisaRyrholm]

I have been able to run the tests locally but I have not jet figure out whats wrong.

The only thing I am sure off is that it is only one test that fail each run and that it is different tests each time.
So it seems like there is something in the test suite setup that is the problem and not the tests itself.

Any idea of where I can continue to look?

[snowystinger]

Because it's saying

This browser doesn't support requestAnimationFrame

We must be getting past some check we had on window existing that we weren't before. Because it's only for React 16 & 17, I think is a little incidental and probably just has to do with where they attach event listeners. They also fail in different ways it looks like, with 16 failing much more.

We may need to leave the ssr tests alone and instead, eventually, create a different ssr test suite which runs in an environment with window and whatever functions environments like Deno attach to said window object. I think a blank object isn't going to be quite right, just a guess though.

For now, you can remove the change in the test file. Thank you!

[LisaRyrholm]

I have updated the PR and removed the changes in ssrWorker.js and now only have the fix.

[LisaRyrholm]

Hi, me and my team want to know when this can be approved and merged into a new version of the package in order for us to get it to our code and be able to go to fix our SSR problem in production?

I see that we have one approve but it seems like we need one more? Anything more that I can do to help out?

Thanks in advance

[snowystinger]

Thanks for the bump, nothing to be done right now. We're moving a little slowly this week. If you need something to hold you over while you wait for this to get a second reviewer and 🤞🏻 approval, I suggest using a tool like "patch-package" to insert this code as a patch in your project.