[Bug]: isBrowser false when no document.createElement

[mateusvahl]

What version of React Router are you using?

6.22.2

Steps to Reproduce

I'm running react-router-dom in Shopify customer account ui environment

This runs on a webworker with a subset javascript API and no access to DOM APIs.

When using useFetcher() , the submit action was throwing an error saying:

router.fetch() was called during the server render, but it shouldn't be. You are likely calling a useFetcher() method in the body of your component. Try moving it to a useEffect or a callback.

After further investigation in the source code, I notice it was related to to isBrowser detection, which expects window.document.createElement !== "undefined" (false in my environment).

A workaround was define createElement before initialise the route, which fixes the detection.

self.document.createElement = () => {  /** empty **/ };

Let me me know if any additional details is needed.

Expected Behavior

isBrowser should not really on window.document.createElement

Actual Behavior

window.document.createElement is undefined, leading isBrowser to be considered false.

[mateusvahl]

If you are using Shopify customer accounts, you can fix it by:

self.window = {};
self.document= {
  createElement = () => {  /** empty **/ };
}

(Remember that window is not accessible in Shopify customer account/webworker, so we "simulate" its presence).

It seems that there's very few places in the source code that uses window, we could probably fix it by using self

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!