fix: apply hydration mismatch bug fix to SVG icons#377
Conversation
* I saw await is used for loadIcon for the css component. * My own app worked OK without this, but it looks like the async/await should probably be here.
|
Regarding my last comment regarding my lack of confidence in my fix, it was largely due to issues I was seeing in my primary app with continued hydration class mismatch errors that I suspected were caused by my use of a custom component to build icons for Vuetify, and a sizing property I am adding to them. I was getting hydration mismatch errors with the SVG viewBox property ('0 0 16 16' vs '0 0 24 24') and 'iconify' classes missing entirely. Icons would be completely missing when this happened (SVG present but no path property). This was only occurring on first load of the icons when accessing my app - after the icons were cached, they rendered fine and I had no more mismatch errors. After going down a few rabbit holes this morning I circled back to this code and found what appears to be another bug -- useAsyncData was not preceded by the 'await' it normally seems to need. Once I added this, boom! No more mismatch errors. In evaluating the css fix I referenced in my PR, I also saw that it used await when calling loadIcon so I figured it wouldn't hurt to add that as well. |
🔗 Linked issue
resolves #356
❓ Type of change
📚 Description
I ran into the issue described here (hydration mismatch warnings caused by @nuxt/icon) and I see a fix was developed, but it did not resolve the issue with my app -- the fix appears to have only applied to CSS icons, while I use SVG.
After applying what appeared to be the most simple code change in replicating the CSS-focused fix above to SVG icons, the hydration mismatch issue appears to be resolved.
Original issue reproduction (my first usage of Stackblitz):
https://stackblitz.com/edit/vitejs-vite-a8edpmzn
Issue resolved when using my fork with the fixes in this PR:
https://stackblitz.com/edit/vitejs-vite-oxw3dzpq
I was able to load the @nuxt/icon playground in addition to using my own app things seem to be working OK, but I'm not familiar enough with the intricacies of this project to be absolutely confident that this is the only code change required.