@next: Nuxt 3 SSR issue: `...inject() can only be used inside setup() or functional components...`

[madebyfabian]

Hey there, first of all, thank you so much for your work on this package!

I have tried out nuxt3 and tried to install this package in the @next branch. Trying to get the <RichTextRenderer> component to work, i've stumbled on an issue. It only appears in production and only for ssr. When I wrap the component inside <ClientOnly>, it doesn't appear. The error it throws:

[Vue warn]: inject() can only be used inside setup() or functional components.
Error: Rich Text Renderer not provided.
    at useRenderer (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/node_modules/@marvr/storyblok-rich-text-vue-renderer/dist/index.js:243:11)
    at setup (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/node_modules/@marvr/storyblok-rich-text-vue-renderer/dist/index.js:229:22)
    at callWithErrorHandling (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:1951:22)
    at setupStatefulComponent (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:7499:29)
    at setupComponent (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:7480:11)
    at renderComponentVNode (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:9833:17)
    at ssrRenderComponent (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:10264:12)
    at file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/app/446.mjs:110:55
    at renderComponentSubTree (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:9904:13)
    at renderComponentVNode (file:///Users/fabian/Desktop/code/_test-nuxt3-app/.output/server/chunks/index.mjs:9849:16)
[Vue warn]: Component RichTextRenderer  is missing template or render function.

it seems to come from:

https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/main/packages/storyblok-rich-text-vue-renderer/src/index.ts#L22-L26

My setup looks like this:

Richtext.vue:

<template>
    <div class="Richtext">
        <RichTextRenderer v-if="doc" :document="doc" />
    </div>
</template>

<script setup lang="ts">
    import { RichTextRenderer } from '@marvr/storyblok-rich-text-vue-renderer'

    const props = defineProps({
        document: { type: Object, required: true },
    })

    const doc = shallowReactive(props.document)
</script>

plugins/richtextRenderer.ts:

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

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

I don't know if the @next Branch is already optimized for ssr, but since the main branch is working with nuxt ssr, I am hoping you could know what the issue here is & if you plan to fix it. Let me know if I can help in some way.

[m4rvr]

Hey, I'm glad my plugin helps! :)

It seems like Nuxt 3 doesn't work with Stackblitz yet. Could you please provide a reproduction on GitHub with static rich-text data like I'm doing it here https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/main/playground/vue/src/routes/index.vue#L6?

That would help a lot so I can directly checkout and have a look into it!

[madebyfabian]

@MarvinRudolph Thanks for your quick answer. Here is a minimal reproduction repo. Docs for it are over there. https://github.com/madebyfabian/nuxt3-storyblok-richtext-reprod Hope this helps!

[fanckush]

I suspect this to be a Nuxt 3 bug, I've had a similar warning with SSR when inject()ing from a 3rd party lib: https://github.com/logaretm/villus/issues/146#issuecomment-1013889212

edit: I'm referring to the inject/provide warning only, I'm not sure about the error message

[m4rvr]

Weird, adding

build: {
  transpile: ["@marvr/storyblok-rich-text-vue-renderer"],
}

to nuxt.config.ts resolves the issue, but I'm not sure why. Maybe the exports are not 100% right, not sure?

[madebyfabian]

@MarvinRudolph This works yeah, another interesting fact: When I am building my example reprod project with the build.transpile option, the .output folder is 973 KB. When I am building the exact same code without build.transpile (so how it's currently in the repo), it's 2.95 MB. So it could be the case that the plugin does not get transpiled by vite/webpack by default.

[m0zz094]

Any update on this? I get the same error on SSR and edding that build transpile snippet does not solve the issue