search

jfreedman0212 / wook-status-article-data-ui

MIT License
0 stars 0 forks source link

Fix hydration issue on Nominator form #1

Open jfreedman0212 opened 1 month ago

jfreedman0212 commented 1 month ago

When loading the nominator form for the first time, I get a hydration error saying that attributes have changed. I thought it might be the call to useReducer, but that doesn't appear to be the case.

Warning: Extra attributes from the server: attributes
form
Form<@http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=aa667011:1571:7
MutationForm@http://localhost:5173/app/components/forms/mutation/mutation-form.tsx:18:7
NominatorForm@http://localhost:5173/app/components/nominator-form.tsx?t=1716009146515:21:7
EditNominator@http://localhost:5173/app/routes/admin.nominators.$id.tsx?t=1716009146515:8:21
RenderedRoute@http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=aa667011:407:7
Outlet@http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=aa667011:738:20
div
section
Admin
RenderedRoute@http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=aa667011:407:7
Outlet@http://localhost:5173/node_modules/.vite/deps/@remix-run_react.js?v=aa667011:738:20
App
main
jfreedman0212 commented 1 month ago

Sometimes, the date format will mess up too (server-side it will format midnight to 24:XX, then on the client it rectifies to 00:XX). Although, fixing that doesn't seem to remove the hydration error.

I ALSO thought that sorting the attributes by name in the reducer function was causing it, but that didn't change anything either...

Everything I find online is either:

  1. Ignore it and suppress it in development (since it doesn't come up in production)
  2. It's one of your browser extensions (tried this in a browser w/o extensions... still there...)

But I feel like there are noticeable issues because of it?