paramander / contentful-rich-text-vue-renderer

Render Contentful Rich Text field using Vue
https://www.npmjs.com/package/contentful-rich-text-vue-renderer
MIT License
38 stars 12 forks source link

Vue 3.3.4: TypeError: Cannot read properties of undefined (reading 'h') #56

Closed tmart2322 closed 1 year ago

tmart2322 commented 1 year ago

I've created the sample component using vue@3.3.4, contentful-rich-text-vue-renderer@3.1.0 and get the error TypeError: Cannot read properties of undefined (reading 'h')

Vue component:

<template>
  <RichTextRenderer :document="document"></RichTextRenderer>
</template>

<script setup>
import RichTextRenderer from "contentful-rich-text-vue-renderer";
const document = {
  nodeType: "document",
  content: [
    {
      nodeType: "paragraph",
      content: [
        {
          nodeType: "text",
          value: "Hello world!",
          marks: [],
        },
      ],
    },
  ],
};
</script>

<style scoped></style>
tolgap commented 1 year ago

What does your package.json look like?

Edit: or even better 🙂 could you create a minimal reproduction on Stackblitz.com or Codesandbox.io ?

tmart2322 commented 1 year ago

@tolgap For my purposes I was able to use the contentful package to render the asset correctly so I reverted back to that.

Here's the package.json in case anyone else has issues:

{
  "name": "tristanmartin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "predeploy": "npm run build",
    "deploy": "cd dist && cp index.html 404.html && echo martindev.io > CNAME && gh-pages -d ../dist"
  },
  "dependencies": {
    "@contentful/rich-text-html-renderer": "^15.13.1",
    "@contentful/rich-text-types": "^16.2.1",
    "contentful-rich-text-vue-renderer":"^3.0.0",
    "contentful": "^9.1.34",
    "core-js": "^3.6.5",
    "marked": "^5.1.1",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primevue": "^3.15.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "gh-pages": "^5.0.0",
    "lint-staged": "^9.5.0",
    "prettier": "^2.2.1"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}
tmart2322 commented 1 year ago

Closing as I was able to use OOTB package