Client-side exception

[MrUltimate]

Hi @ndimatteo

Thanks for your great work on this starter. This is exactly what I'm looking for on my next project.

Quick thing, seeing a client-side exception happening when I'm navigation on the starter. Once this error occurs, there's no way to access the site again. This is what I'm seeing:

Seems like it's coming from focus-trap-react

[ndimatteo]

Hey there @MrUltimate– we use focus-trap-react in a number of places to help with accessibility with pop-ups, menus, and other overlays.

This error should not pop-up unless you have configured something that doesn't have a focusable element within it.

I'd suggest looking at the cookie banner, header navigation, etc. and making sure that you are rendering something where these are used, otherwise you'll see this client-side error.

[MrUltimate]

Hi Nick, this is occurring on your site demo :)

I have yet to use the template as I’m still exploring my options.

On Mon, Oct 30, 2023 at 6:29 PM Nick DiMatteo @.***> wrote:

Hey there @MrUltimate https://github.com/MrUltimate– we use focus-trap-react in a number of places to help with accessibility with pop-ups, menus, and other overlays.

This error should not pop-up unless you have configured something that doesn't have a focusable element within it.

I'd suggest looking at the cookie banner, header navigation, etc. and making sure that you are rendering something where these are used, otherwise you'll see this client-side error.

— Reply to this email directly, view it on GitHub https://github.com/ndimatteo/HULL/issues/128#issuecomment-1786147032, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB3TI3BCPBFNGK64UQBDRCTYCAS57AVCNFSM6AAAAAA6C3QY7OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBWGE2DOMBTGI . You are receiving this because you were mentioned.Message ID: @.***>

[ndimatteo]

@MrUltimate what page are you experiencing this on the live Demo site? I'm unable to replicate this on any page I've tested on.

[MrUltimate]

It happens when you hit checkout. Looks like it was my AdBlockers (uBlock Origin) that was messing with something. Here's a screenshot of the scripts it's blocking. I wonder if there's a way to prevent the error from happening in this case because it completely blocks the site without any fallback.

[ndimatteo]

Thanks for clarifying @MrUltimate,

I installed uBlock Origin and was still unable to replicate what you're seeing. Do you have specific settings enabled with your adblocker?

Either way, I'm not sure of a solution for this. If a browser extension is blocking core assets from loading it's inevitable that a site will crash or fail to function properly.

Regardless– I have plans to overhaul this starter with an entirely new approach (using hydrogen-react and radix, that will remove the need for focus-trap-react and other dependencies, so for now I'm going to close this issue.

[MrUltimate]

Thank you, I do have some additional filters active that might be causing it.

The rework sounds great, switching to radix definitely sounds like a good idea. I'm curious, what does hydrogen-react bring to the table other than some standard components like cart and checkout?

[nimser]

It's also happening with me directly when hitting the homepage, using Brave browser with default settings (no browser extensions). Deactivating the Brave Shield entirely makes the page load, and looking in detail, it's the blocking of the GoogleTagManager tracker that was causing problem for me. Allowing that tracker to load results in a functioning website.

This should be easy to reproduce with a stock latest install of Brave Browser.