TypeError: Cannot read properties of undefined (reading 'h')

[ravi-magecroco]

Hello, thanks for creating the plugin. Unfortunately, I am getting exception as soon as I try to use it. Below is the entire .vue file code as well as the exception I am getting. Any help would be appreciated a lot. Thanks.

Code:

<template>
  <div>
    <RichTextRenderer :document="document" />
  </div>
</template>
<script>
import Vue from "vue";
import { h } from "vue";
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import RichTextRenderer from 'contentful-rich-text-vue-renderer';

export default {
  name: "MTextGridListing",
  components: {
    RichTextRenderer
  },
  data() {
    return {
      document: {
        nodeType: "document",
        content: [
          {
            nodeType: "paragraph",
            content: [
              {
                nodeType: "text",
                value: "Hello world!",
                marks: []
              }
            ]
          }
        ]
      }
    }
  }
};
</script>

Exception: TypeError: Cannot read properties of undefined (reading 'h') while going through the stacktrace, it seems the error is on the line: var h = globalThis.Vue.h;

My Vue version is: 2.6.11 and I am not using any other special packages in my small app.

It could be me missing something but great if you can try and figure this out and help. Thanks again.

[tolgap]

There is a pretty big message at the beginning of the README 😅:

Please use version contentful-rich-text-vue-renderer@2 for Vue 2 support. Use this link to find the correct README for your version: https://github.com/paramander/contentful-rich-text-vue-renderer/tree/v2.1.0

[ravi-magecroco]

Hi @tolgap - gotcha! Sorry for the miss.

Side question: Using version 2.x, can I embed and render images and other assets?

[tolgap]

@ravi-magecroco of course! You will need to override EMBEDDED_ASSET nodes.

There's an example of how overrides are done in the README as well. If you want an actual example, you can check out the index.test.js example for EMBEDDED_ENTRY: https://github.com/paramander/contentful-rich-text-vue-renderer/blob/v2.1.0/src/index.test.js#L666:L687

but then it's up to you to implement it for EMBEDDED_ASSET with the correct rendering to img using h('img', { src: xxx })

[ravi-magecroco]

Thanks @tolgap - appreciate your support.

[mschuette-kpunkt]

I saw this post and was happy, not being the only one, but the fix does not work for me, since I am using vue 3 already. Can the error have another reason, too? the versions: "contentful-rich-text-vue-renderer": "^3.1.0", "vue": "^3.2.45",

code is same as above.

Thanks for any help! @tolgap Can you help me, please?