search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.11k stars 1.14k forks source link

Window is defined in Deno 1.x #6534

Open lishaduck opened 5 months ago

lishaduck commented 5 months ago

Provide a general summary of the issue here

There are many typeof window == 'undefined' checks in this codebase. In Deno 1.x, window is defined, so these are incorrect. In Deno 2, it won't be becuase of this sort of issue, but you can't opt-in to the upcoming Deno 2 behavior in Deno Deploy, though there is a flag locally.

Many people, including me, are using HeadlessUI with Fresh, and HeadlessUI 2 uses react-aria. Fixing this requires hacky workarounds on our side.

🤔 Expected Behavior?

SSRing in Deno should work. #4676 and #4688 suggest that react-aria should support Deno.

😯 Current Behavior

(An example from denoland/fresh#2426, as I don't have a broken file on me right now)

ReferenceError: document is not defined
    at _ (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/utils.mjs:2:1579)
    at we (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/utils.mjs:2:1627)
    at ee (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/interactions.mjs:2:17263)
    at Ce (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/interactions.mjs:2:19622)
    at V (https://esm.sh/v135/@react-aria/focus@3.17.0/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/focus.mjs:2:12915)
    at dd (https://esm.sh/v135/@headlessui/react@2.0.3/X-YS9AdHlwZXMvcmVhY3QtZG9tOnByZWFjdC9jb21wYXQsQHR5cGVzL3JlYWN0OnByZWFjdC9jb21wYXQscmVhY3QtZG9tOnByZWFjdC9jb21wYXQscmVhY3QvanN4LXJ1bnRpbWU6cHJlYWN0L2NvbXBhdC9qc3gtcnVudGltZSxyZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0/denonext/react.mjs:6:102879)
    at Object.t (https://esm.sh/stable/preact@10.21.0/denonext/compat.js:2:1545)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)

💁 Possible Solution

Always use @react-aria/ssr, which, on first glance, doesn't seem to have this issue?

🔦 Context

I'm trying to remove lots of if (!IS_BROWSER) checks in my codebase.

🖥️ Steps to Reproduce

I can't access CodeSandbox, and you'd need Deno anyway (presumably it uses Node).

Version

https://github.com/PHS-TSA/webmaster-23-24/blob/90ea1948753785c8df482facfd6a96e134d0448f/deno.json#L76-L80

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

Fresh Users

🕷 Tracking Issue

denoland/fresh#2206 denoland/fresh#2426 denoland/deno#23784

LFDanLu commented 5 months ago

Thank you for the issue, I imagine we could implement the same change to use typeof document !== 'undefined' in the remainder of the places where window !== 'undefined' is used. Would you like to open a PR for this?

lishaduck commented 5 months ago

Thank you for the issue, I imagine we could implement the same change to use typeof document !== 'undefined' in the remainder of the places where window !== 'undefined' is used.

I think that should fix it. Checking the stacktrace, here're the potential culprits (though it should probably be fixed everywhere): Code Search Results

Would you like to open a PR for this?

I don't think I can sign a CLA, so I'll decline. Otherwise, I'd be happy to. Thanks for your responsiveness!