Using new useStoryblokRichText
composable causes (large) warnings server-side and hydration-error client-side
#898
Labels
pending-author
[Issue] Awaiting further information or action from the issue author
pending-triage
[Issue] Ticket is pending to be prioritised
Describe the issue you're facing
I'm trying to use the
useStoryblokRichText
composable of the new richtext-functionality with Nuxt.At first i had the problem, that the
render
function generated a VNode instead of the (documented) html. I raised an issue at thestoryblok-vue
repo for this (storyblok/storyblok-vue#745) regarding this. So i used the VNode directly instead ofv-html
like this:But this does not seem to play well with Nuxt (and possibly SSR/SSG in general).
Server-side it throws several vue-warnings (which are pretty large due to the complete VNode being output too):
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
Client side, the rendered content is correctly displayed, but a hydration mismatch warnind is thrown, since the server doesn't seem to render node at all (probably due to the warnings):
Nothing getting rendered on server of course has the problem, that the content is only displayed on client once hydration is done, which is problematic (also regarding SEO).
Reproduction
https://stackblitz.com/edit/nuxt-3-quickstart-demo-norkmc?file=pages%2Findex.vue
Steps to reproduce
No response
System Info
Used Package Manager
npm
Error logs (Optional)
No response
Validations
The text was updated successfully, but these errors were encountered: