storyblok / storyblok-nuxt

Storyblok Nuxt module
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
MIT License
279 stars 44 forks source link

StoryblokRichText inside .vue components triggers `Invalid watch source: undefined` warning #934

Open m-shum opened 2 hours ago

m-shum commented 2 hours ago

Describe the issue you're facing

Nuxt v: ^3.10.2 storyblok-nuxt v: ^6.2.0 ssr: true

Issue description: Using StoryblokRichText triggers a vue warning: Invalid watch source: undefined. A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. Using old v-html with renderRichText does not trigger warning.

Wrapping StoryblokRichText in ClientOnly doesn't resolve the issue, which also shows up if StoryblokRichText is called in app.vue as well as nested components. Checking for block before rendering StoryblokRichText does not resolve the issue.

Reproduction

https://stackblitz.com/edit/github-ugbuh1?file=app.vue,nuxt.config.ts

Steps to reproduce

No response

System Info

Nuxt v: ^3.10.2
storyblok-nuxt v: ^6.2.0

  System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 138.94 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.6

Used Package Manager

npm

Error logs (Optional)

runtime-core.esm-bundler.js?v=206996f9:50 [Vue warn]: Invalid watch source: undefined A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. at <StoryblokRichText key=0 doc= {type: 'doc', content: Array(5)} > at at <Index onVnodeUnmounted=fn ref=Ref< Proxy(Object) {v_skip: true} > > at <Anonymous key="/organizations" vnode= {__v_isVNode: true, v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/organizations?page=1', hash: '', query: {…}, name: 'organizationsendefault', path: '/organizations', …} ... > at at at <Default ref=Ref< Proxy(Object) {__v_skip: true} > > at <AsyncComponentWrapper ref=Ref< Proxy(Object) {__v_skip: true} > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at at at

Validations

codeflorist commented 2 hours ago

The problem was introduced in @storyblok/vue v8.1.5.

Putting "@storyblok/vue": "8.1.4" in package.json solves the problem.

See https://github.com/storyblok/storyblok-vue/issues/768