Hello,
When using React 19, Polaris web components will show a SSR rendering issue when using the defaultValue prop. Reproduction:
<s-text-field label="foo" defaultValue="bar"></s-text-field>
Result in the console:
Issue is not reproducible on React 18.
With SSR, I believe React only ever sets attributes, not properties, yes?
If that’s the case, then on the Server you’d need to make sure you’re setting the attribute value=”bar”, and on the client that will then correctly set the property defaultValue
Mhhh but it is working in React 18. It sounds a bit confusing to have a different property depending on the environment. It only does it for defaultValue. Could you please check again? There must be a better fix.
React19 completely changed the way that they (React) interface with web components, so unfortunately this is how they set things up. React v19 – React
We try to patch things up as much as we can, but ultimately there are things that are going to be fundamentally different between React18 and React19
Hello,
Thanks for the answer. I feel this should somehow better be documented hten. Having to use defaultValue/value depending on the context is confusing, especially since Remix/React Router apps are SSR, this will be the siutation for most Polaris users. Could the correct usage be clarified somewhere in the docs?
Hi again @Anthony_Frehner ,
I spent long time this morning but could not find a way to fix that. I tried to use defaultValue on server and value on client side, the problem is that it seems that when the React Router app is re-hydrated on client side, so defaultValue does not get set. As a consequence, calling resetForm on the form (or using the save bar) will restore the form to a completely blank state (no value for any input).
Could you please have a look and give me a working example that does not break reset functionality and does not cause those hydration errors on React 19 please?
Sorry for pinging on that again @Anthony_Frehner , but after trying ton of different solution I can’t find a clean solution that removes the errors while keeping the functionality intact. Would you have an example code you can share on React 19 with Polaris components?
