Uncaught DOMException when in an environment without access to sessionStorage

[shieldski]

What version of Remix are you using?

1.6.3

Steps to Reproduce

1. Establish an environment where the application does not have access to sessionStorage, such as using a Remix app in a child iframe with a different origin from the parent while the user is using Chrome in Incognito mode with third party cookies blocked.

2. Visit any route within the Remix app and receive Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

Expected Behavior

I would expect the app to load, even without access to sessionStorage. Functionality provided by a component dependent on sessionStorage (ScrollRestoraion) may not function correctly, but the application should not throw an unhandled exception.

Placing access to sessionStorage inside a try/catch block appears to allow the application to continue to function. See
remix/packages/react/scroll-restoration.tsx lines 11-14.

I attempted not using the ScrollRestoration component, but the exception still occurs.

Actual Behavior

Visiting any route in the above environment causes an Uncaught DOMException to be thrown and the application fails to render.

[Gim3l]

I'm getting this error as well.

[mattevans-dev]

I'm also receiving this error.
It seems to only happen to me when using netlify dev. If I use the remix server it works fine.
To reproduce:

1. Run netlify dev
2. Create a page with an iframe
3. Refresh page
4. Add in another iframe to the same page
5. Refresh Page and you should see the sessionStorage is undefined error.

[rpominov]

We're having the same issue at https://github.com/webstudio-is . This happens when a Remix website is in an iframe with a domain different from the main document, and "Block third-party cookies" is enabled at chrome://settings/cookies.

[machour]

Since Remix 1.10.0, the component is the one from React Router.

Its implementation changed a bit, and the only calls to sessionStorage are within the component, removing the component like OP tried should work fine.

[brophdawg11]

@machour is correct and this should no longer be an issue once you remove the component