search

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 - Using custom nodeRenderer gives error #32

Closed habos closed 3 years ago

habos commented 3 years ago

I get this when trying to use anytime of custom nodeRenderer: 'Uncaught (in promise) TypeError: next is not a function at Object._a. [as paragraph] (ff-core-lib.umd.js?eeb8:formatted:14637) at renderNode (ff-core-lib.umd.js?eeb8:formatted:4245) at eval (ff-core-lib.umd.js?eeb8:formatted:4363) at Proxy.map () at renderNodeList (ff-core-lib.umd.js?eeb8:formatted:4361) at RichText (ff-core-lib.umd.js?eeb8:formatted:4253) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1186) at componentEffect (runtime-core.esm-bundler.js?5c40:5184) at reactiveEffect (reactivity.esm-bundler.js?a1e9:42) at effect (reactivity.esm-bundler.js?a1e9:17)'

I tried with both the paragraph renderer in the test file for adding breaks and with just the simple one given in the readme as a test. This worked in vue2 just fine but after upgrading vue and this package it no longer works. Any help would be appreciated.

tolgap commented 3 years ago

Hi @habos,

There is a release candidate for Vue 3: 3.0.0-rc.0.

I have not merged it yet, seeing as there are still many, many more Vue 2 projects than Vue 3 projects. Version 3 contains breaking changes. I do not have any Vue 3 projects myself, so I haven't been able to test it in real life scenarios, hence the RC0 tag.

Please give version 3 a shot, and if you run into any issues, open a new one. Thanks 👍 .

habos commented 3 years ago

Hey no worries, yeah thats what I am using. Thanks for the quick response. The base of the package works just fine its just when adding the nodeRenderers prop.

tolgap commented 3 years ago

@habos

I've created a quick fiddle with version 3.0.0-rc.3 (with some minor changes based on rc.0). I am changing the BLOCKS.EMBEDDED_ENTRY from <div> to <span>: https://jsfiddle.net/n2ovLxea/

Try using the latest version npm i contentful-rich-text-vue-renderer@next and hopefully that JSFiddle will help you as well. If you still can't figure it out, please post the snippet here.

habos commented 3 years ago

I fixed it, was unaware the vue3 had moved the h hypertext function to an import instead of passing it in as an argument. Thanks for the help!!