Fix hydration issue on build

donmckenna commented 1 year ago

So the culprit seemed to be a v-html inside a v-for which loops over unchanging data imported into the .vue component from a .ts object.

The bug does NOT exist locally however, only when deployed to Netlify.

Vitepress' docs say that hydration issues like this one can occur from the build process/tool Auto-Minifying the HTML, as Vue uses syntax like  for placeholders which would obviously be "cleaned up" as benign comments by HTML minification. https://vitepress.dev/guide/deploy#netlify-vercel-cloudflare-pages-aws-amplify-render https://github.com/vuejs/vitepress/issues/369#issuecomment-1150970906

However, we don't have HTML minifying enabled on our Netlify build at all, which makes this even more curious:

Regardless, changing the single <p v-html="project.description" /> to <p>{{ project.description }}</p> fixed this hydration issue (and actually perhaps others(?)). Note, not all v-html instances break this, but only v-html only in this scenario seems to break it.

I'm still quite confused, but overall it "makes sense" somewhere, and now we at least have a user-facing fix.

Old:

https://user-images.githubusercontent.com/22125230/227009784-6f62d5a1-8cff-48bb-9060-9ee1b66a3814.mov

New:

https://user-images.githubusercontent.com/22125230/227009881-ab3b5237-92e1-48ca-8d31-7cd7df041e53.mov

stackblitz[bot] commented 1 year ago

Run & review this pull request in StackBlitz Codeflow.

netlify[bot] commented 1 year ago

Deploy Preview for webcontainer-docs ready!

Name	Link
Latest commit	2ee0a5d088ff5a84a328bf0263231a867f907cf5
Latest deploy log	https://app.netlify.com/sites/webcontainer-docs/deploys/641b4d2ac35b820009a2e5dc
Deploy Preview	https://deploy-preview-26--webcontainer-docs.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

stackblitz / webcontainer-docs