Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using new useStoryblokRichText composable causes (large) warnings server-side and hydration-error client-side #898

Open
1 task done
codeflorist opened this issue Oct 3, 2024 · 0 comments
Labels
pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised

Comments

@codeflorist
Copy link

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 the storyblok-vue repo for this (storyblok/storyblok-vue#745) regarding this. So i used the VNode directly instead of v-html like this:

<script setup>
import { useStoryblokRichText, BlockTypes, MarkTypes } from '@storyblok/vue';
const story = await useAsyncStoryblok(
  'home',
  { version: 'draft' },
  { customParent: 'https://app.storyblok.com' }
);

const resolvers = {
  [MarkTypes.LINK]: (node) => {
    return h(
      'a',
      {
        href: node.attrs?.href,
        target: node.attrs?.target,
      },
      node.text
    );
  },
};

const { render: richTextRender } = useStoryblokRichText({
  resolvers,
});

const RichTextVNode = richTextRender(story.value.content.richtext);
</script>

<template>
  <RichTextVNode />
</template>

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):

- rendered on server: <!---->  
- expected on client: div 

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

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm

Used Package Manager

npm

Error logs (Optional)

No response

Validations

@codeflorist codeflorist added pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised labels Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised
Projects
None yet
Development

No branches or pull requests

1 participant