Hydration Mismatch when using TextField endAdornment

BierDav commented 1 year ago

When using a endAdornment with JSX you get a Hydration Mismatch no matter what I tried. That's a simple way to reproduce following issue: <TextField InputProps={{endAdornment: <Visibility/>}}/>

Error message:

Error: Unrecoverable Hydration Mismatch. No template for key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-1-0-1-0-0-0-0-0-3-0-2-0-0-0-3-1-1-0-4
    at Module.getNextElement (http://localhost:3000/node_modules/.vite/deps/chunk-CXUCV2AK.js?v=431d3877:379:13)
    at createStaticComponent (http://localhost:3000/node_modules/@suid/system/Dynamic/Dynamic.jsx?v=431d3877:28:45)
    at Object.fn (http://localhost:3000/node_modules/@suid/system/Dynamic/Dynamic.jsx?v=431d3877:36:27)
    at runComputation (http://localhost:3000/node_modules/.vite/deps/chunk-5EDTS75K.js?v=431d3877:755:22)
    at updateComputation (http://localhost:3000/node_modules/.vite/deps/chunk-5EDTS75K.js?v=431d3877:738:3)
    at Object.readSignal (http://localhost:3000/node_modules/.vite/deps/chunk-5EDTS75K.js?v=431d3877:659:7)
    at normalizeIncomingArray (http://localhost:3000/node_modules/.vite/deps/chunk-CXUCV2AK.js?v=431d3877:626:18)
    at insertExpression (http://localhost:3000/node_modules/.vite/deps/chunk-CXUCV2AK.js?v=431d3877:571:9)
    at Object.fn (http://localhost:3000/node_modules/.vite/deps/chunk-CXUCV2AK.js?v=431d3877:572:42)
    at runComputation (http://localhost:3000/node_modules/.vite/deps/chunk-5EDTS75K.js?v=431d3877:755:22)

A sample for reproducation: Github: https://github.com/BierDav/suid-bug/tree/issue_233 StackBlitz: https://stackblitz.com/github/BierDav/suid-bug/tree/issue_233

juanrgm commented 1 year ago

Duplicated (https://github.com/swordev/suid/issues/139).

Disable ssr:

export default defineConfig({
  plugins: [suidPlugin(), solid({ ssr: false })],
});

BierDav commented 1 year ago

Are there any plans to fix this specific issue? 🙂

swordev / suid

Hydration Mismatch when using TextField endAdornment #233