Dev server not working properly on Safari browser

salmannotkhan commented 2 months ago

Reproduction

Initialize any remix template
Start dev server and open it inside Safari
Update the routes/_index.tsx (add any html element)
Refresh the dev site on Safari

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 95.53 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /opt/homebrew/opt/nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/opt/nvm/versions/node/v20.10.0/bin/npm
    bun: 1.1.13 - /opt/homebrew/bin/bun
    Watchman: 2024.06.24.00 - /opt/homebrew/bin/watchman

Used Package Manager

npm

Expected Behavior

It should render updated change without any hydration error.

Actual Behavior

Error: Hydration failed because the initial UI does not match what was rendered on the server

Because server is responding with latest code and client is rendering old code.

carlostobon commented 2 months ago

Same error in Qutebrowser, working fine in Brave.

salmannotkhan commented 2 months ago

Qute Browser is also based webkit. I think this bug is only with webkit based browsers. Maybe webkit handles cached html responses differently?

carlostobon commented 1 month ago

I've been reading and it seems Qutebrowser uses WebEngine as backend so it's probably related to compatibility issues. Once you build are you getting any error?

salmannotkhan commented 1 month ago

No, only issues with dev server

john-griffin commented 1 month ago

Same here. Easy to reproduce in Safari by following steps above. Not getting it in chrome.

tschmidt-code commented 1 month ago

I had this same issue; setting NODE_ENV=development seemed to fix the issue. Seems like this aught to be automatic in this command?

saaymeen commented 1 month ago

Seems like the client is rendering some kind of cached snapshot of the project, I can see remix attempting to load/display old code that has long been updated. Might be noteworthy to add that this happens only on manual reloads, if I hot reload the app (changing source code with running dev server) everything works fine, but as soon as you hit CMD+R to reload the browser window hell is let loose.

remix-run / remix