"TypeError: Cannot read property 'call' of undefined" when using it with Gridsome

[istvanvasil]

Hi

I am only working development from time to time so this might be a novice question, sorry. I am trying to use it with Gridsome but I get "TypeError: Cannot read property 'call' of undefined"

My block content is basic rich text from an about page. Paragraphs with links.

I registered the component in the main.js file for global use:

import DefaultLayout from '~/layouts/Default.vue'
import { SanityBlocks } from 'sanity-blocks-vue-component';

export default function (Vue, { router, head, isClient }) {
  Vue.component('Layout', DefaultLayout)
  Vue.component('sanity-blocks', SanityBlocks)
}

And my component looks like this:

<template>
  <div>
    <sanity-blocks :blocks="$static.about._rawColumn_1" />
  </div>
</template>

<static-query>
query {
  about: sanityAbout (id: "about") {
    title
    _rawColumn_1
  }
}
</static-query>

I am not using any custom serializers as my block content is basic. In case I interpretted the description correctly "This package comes with default serializers for rendering basic block content"

I tried everything I could find online but I end up at the same error.

Anyone who can point me in the right direction? Thank you.

[adamchipperfield]

+1

[rdunk]

Can you confirm the version of this plugin you are using? If it is >=1.x can you confirm if Gridsome supports Vue 3? Thanks.

[istvanvasil]

Can you confirm the version of this plugin you are using? If it is >=1.x can you confirm if Gridsome supports Vue 3? Thanks.

Thank you for the quick reply. Installing an older version such as 0.1.0 fixes the problem. The problem must be around Vue 3 compatibility.

Closing this issue.