search

remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
29.35k stars 2.47k forks source link

Cloudflare's Rocket Loader make hydration fail in firefox #3590

Open atouchsh opened 2 years ago

atouchsh commented 2 years ago

What version of Remix are you using?

1.6.0

Steps to Reproduce

Visit the following link in firefox https://signup.seminaire.com/join/happy-event-1

Expected Behavior

tried in chrome, edge, safari, opera it works fine but firefox not

Actual Behavior

it shows the following error

image
machour commented 2 years ago

Hi @atouchsimo, is there any way you can provide a public repository reproducing this issue?

Hard to say what's going on exactly here except that useRemixEntryContext() returned an undefined routeModules object.

machour commented 2 years ago

You seem to be using Cloudflare, I wonder if turning off the 'Rocket Loader' under speed optimizations would solve your issue (see https://github.com/remix-run/remix/issues/1618#issuecomment-1113887894)

atouchsh commented 2 years ago

@machour it's working now after disabling rocket loader

machour commented 2 years ago

Excellent. Took the liberty to rename your issue to see if we can fix this somehow on our end.

It seems that we should be adding data-cfasync="false" on our scripts tags to avoid this issue:

https://support.cloudflare.com/hc/en-us/articles/200168056-Understanding-Rocket-Loader

sciutand commented 2 years ago

We are facing the same issue. Rocket loader indeed interferes with the order of the scripts being loaded and it causes the issue. However adding data-cfasync="false" to the tags only seems to affect SSR render. After hydration the tags are gone. Not sure if it's rocket loader doing so or remix?. In any case it doesn't solve the issue.

marwan38 commented 2 years ago

What version of Remix are you using?

1.6.0

Steps to Reproduce

Visit the following link in firefox https://signup.seminaire.com/join/happy-event-1

Expected Behavior

tried in chrome, edge, safari, opera it works fine but firefox not

Actual Behavior

it shows the following error

image

Adding data-cfasync=false to the <Scripts /> element should fix that one issue (as mentioned on https://support.cloudflare.com/hc/en-us/articles/200168056-Understanding-Rocket-Loader), but, there is something else conflicting. I'm still looking into the issue, trying to figure out a way to reliably have rocket loader on with our remix pages.

martinmckenna commented 1 year ago

i just spent weeks trying to figure this error out 😞. i would love to see this explanation appear somewhere in the server gotchas page on the website