Custom Component resolver + Nuxt console error even though component renders

[dByler1]

"@marvr/storyblok-rich-text-vue-renderer": "^2.0.1",
"@vue/composition-api": "^1.2.1",
"nuxt": "^2.15.7",'

Using the resolver and custom component as seen below I get an error message "the client-side rendered virtual DOM tree is not matching server-rendered content".

The error is not consistent. Possibly I resolved it with mode: "client" on the plugin and <client-only> on the component. Ideally the resolver would work server & client side.

I believe on the server render I'm hitting line 7 of components.ts and the component is undefined causing the program to load SbComponentFallback and render the error text. The client side seems to render fine so even when I get the console error, the component visually displays.

RESOLVER PLUGIN
import Vue from "vue";
import VueRichTextRenderer from "@marvr/storyblok-rich-text-vue-renderer";
import BlockQuote from "~/components/RichTextRender/BlockQuote";

Vue.use(VueRichTextRenderer, {
  resolvers: {
    components: {
      rich_text_block_quote: BlockQuote,
    },
  },
});

NUXT CONFIG
plugins: ["~/plugins/composition-api.js", { src: "~/plugins/storyblok-rich-text-renderer.js", mode: "client" },

COMPONENT
<template>
  <client-only>
    <figure>
      <blockquote>
        <p>{{ body.quote }}</p>
      </blockquote>
      <figcaption class="paragraph-small">{{ body.credit }}</figcaption>
    </figure>
  </client-only>
</template>

<script>
export default {
  name: "BlockQuote",
  props: {
    body: {
      type: Object,
      required: true,
    },
  },
};

Error Screenshot with BlockQuote component visually rendered:

[madebyfabian]

Hey there, having the exact same issue right now, were you able to resolve it?

[madebyfabian]

For me, the issue is that I have a resolver for a custom image block, and my custom component is a div element. Since it is rendered inside a p tag by the resolver, it is invalid HTML which the warning comes from. I think there should be a way to disable rendering custom elements inside p tags...