m4rvr / storyblok-rich-text-renderer

Fast renderer for your rich-text content.
35 stars 15 forks source link

"Rich Text Renderer not provided." when building and then using "nuxt start". #23

Open SebbeJohansson opened 2 years ago

SebbeJohansson commented 2 years ago

Hi. I am having issues rendering rich text in a built ssr = true and target = static environment. It is working fine when doing "nuxt dev", but building and then starting does not work. Am I doing something wrong?

image

You can find the full project here: https://github.com/SebbeJohansson/sebbejohansson-front/tree/features/nuxt3-storyblok

SebbeJohansson commented 2 years ago

Okay I gave up on using this rendering package and resorted to just using storyblokApi.richTextResolver.render() to render it. Since I am in nuxt3 with typescript and composition API the code looks like this for me:

<script setup lang="ts">
const props = defineProps({ blok: Object });
const storyblokApi = useStoryblokApi();
const text = computed((): string => storyblokApi.richTextResolver.render(props.blok.text));
</script>

<template>
  <div v-editable="blok" class="text">
    <div v-html="text" />
  </div>
</template>

This works in all rendering cases I have tested and I have fully deployed the site to netlify.

houdiini commented 2 years ago

I found the solution there #21 Add to your config build: { transpile: ["@marvr/storyblok-rich-text-vue-renderer"], }

SebbeJohansson commented 2 years ago

I found the solution there #21 Add to your config build: { transpile: ["@marvr/storyblok-rich-text-vue-renderer"], }

@houdiini Nope sadly it does not work. I've had that on from the start.

arpadgabor commented 2 years ago

@SebbeJohansson at least in my case, @houdiini 's solution worked (nuxt 3 rc6, netlify deploy).

SebbeJohansson commented 2 years ago

@arpadgabor With ssr = true and target = static?

DreaMinder commented 2 years ago

Adding the following plugin solved it for me in Nuxt 3:

import { plugin } from '@marvr/storyblok-rich-text-vue-renderer'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(plugin())
})
SebbeJohansson commented 2 years ago

@DreaMinder Same question as for arpadgabor, did that work with ssr=true?

DreaMinder commented 2 years ago

@SebbeJohansson yes

SebbeJohansson commented 2 years ago

@DreaMinder Okay nice! Have you tested how that method performs compared to storyblokApi.richTextResolver.render(props.blok.text) in terms of performance?

arpadgabor commented 2 years ago

Sorry for not replying @SebbeJohansson , I also got it working with SSR and in the netlify build preset, no static builds.

DreaMinder commented 2 years ago

@SebbeJohansson I didn't do any benchmarks but when pregenerating 1k pages, there's no noticeable difference compared to rendering an html string into v-html (without richtext).

alvarosabu commented 2 years ago

Adding the following plugin solved it for me in Nuxt 3:

import { plugin } from '@marvr/storyblok-rich-text-vue-renderer'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(plugin())
})

I still have the issue when generating for SSG, this didn't work.