It seems that there is a hydration or value mismatch on input fields rendered. 2 places that I have noticed is on the login page and /users/kody/notes/new page
Here is the warning that I see on the browser console:
react-dom.development.js:86 Warning: Prop
requireddid not match. Server: "null" Client: "true" at input at div at Field (http://localhost:3000/build/_shared/chunk-BSZPZSYR.js:962:3) at form at http://localhost:3000/build/_shared/chunk-BCML5FIO.js:4972:9 at fetcher.Form at NoteEditor (http://localhost:3000/build/_shared/chunk-PDY3WINQ.js:73:3) at NewNoteRoute at RemixRoute (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:5795:3) at RenderedRoute (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3482:5) at Outlet (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3810:26) at main at div at div at NotesRoute (http://localhost:3000/build/routes/users+/$username_+/notes-JGNJTVY3.js:61:16) at RemixRoute (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:5795:3) at RenderedRoute (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3482:5) at RenderErrorBoundary (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:4029:9) at Outlet (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3810:26) at div at body at html at App (http://localhost:3000/build/root-3JJ2C4UT.js:3216:16) at RemixRoute (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:5795:3) at RenderedRoute (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3482:5) at RenderErrorBoundary (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:4029:9) at DataRoutes (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3745:5) at Router (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3817:15) at RouterProvider (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:3701:5) at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:5357:5) at RemixBrowser (http://localhost:3000/build/_shared/chunk-BCML5FIO.js:7307:40)
Adding a console.log statement on the note-editor, I see the following:
Server-side
conform input { id: 'note-editor-title', name: 'title', form: 'note-editor', required: undefined, type: undefined, minLength: undefined, maxLength: undefined, min: undefined, max: undefined, step: undefined, pattern: undefined, multiple: undefined, defaultValue: undefined }
On the client:
conform input { defaultValue: undefined, form: "note-editor", id: "note-editor-title", max: undefined, maxLength: undefined, min: undefined, minLength: 1, multiple: undefined, name: "title", pattern: undefined, required: true, step: undefined, type: undefined, }
@edmundhung could this be a conform thing or something else from how react components are rendered?