remix-run / remix

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

`defer` only works on Chrome but not in firefox #10142

Closed romancitodev closed 1 month ago

romancitodev commented 1 month ago

Reproduction

https://stackblitz.com/edit/remix-run-remix-adjy1k?file=app%2Froutes%2Fcontacts.%24contactId.tsx

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 7.57 GB / 23.90 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @remix-run/dev: ^2.13.1 => 2.13.1
    @remix-run/node: ^2.13.1 => 2.13.1
    @remix-run/react: ^2.13.1 => 2.13.1
    @remix-run/serve: ^2.13.1 => 2.13.1
    vite: ^5.4.9 => 5.4.9

Used Package Manager

pnpm

Expected Behavior

The defer in firefox should work as in chrome.

Actual Behavior

In chrome the hydration works, but in firefox for some reason, it does not.

Firefox: image

brophdawg11 commented 1 month ago

This works fine in Firefox for me. This is likely something going on in your app or local dev setup?

Screenshot 2024-10-21 at 1 30 13 PM

romancitodev commented 1 month ago

the stackblitz playground code is the same that I have in local, it's a bit weird because I tried using Zen (uses firefox below) and I used Brave (uses chromium below) and I get the hydration problem (in local) but if I use the stackblitz webcontainer, it works.

romancitodev commented 1 month ago

image I saw the network panel and the server returns a 200 with the number 1, thats ok, but I don't know why the hydration isn't working (for me). I created a repo holding the issue (https://github.com/romancitodev/remix-test) just to discard some bad configuration but isn't.

romancitodev commented 1 month ago

well, I figured out that the error comes from the react hydration directly. image

I looked in other issues and I think this issue might be relationed #9850 (In the issue talks about some compatibility issues with some engines so can be this thing I guess)

brophdawg11 commented 1 month ago

Your repo works fine in firefox for me as well. Do you have extensions installed? They are known to cause issues with react hydration - see https://github.com/remix-run/remix/issues/4822

romancitodev commented 1 month ago

The only extension I have is the Bitwarden one.

romancitodev commented 1 month ago

Well, digging a little more, I found out that the bitwarden extension is the cause of the hydration error (I opened a private window without the extension and everything worked correctly).