How to fix Nuxt quilljs-renderer returning op.insert.indexOf is not a function?

Question

I am using the QuillJS-renderer npm package and passing it the Quill Delta from the database.

const postRender = require('quilljs-renderer');

const { Document } = postRender;
postRender.loadFormat('html');

I fetch the data from firestore here:

  async fetch() {
    await this.$store.dispatch('getPost', this.$route.params.id);
  },

Then I update the DOM using the renderPost method:

  updated() {
    this.renderPost(this.post);
  },

renderPost(post) {
      const delta = JSON.parse(post.quillDELTA);
      const doc = new Document(delta);
      try {
        console.log(doc.convertTo('html'));
        this.article = doc.convertTo('html');
      } catch (e) {
        console.info(e.message);
      }
    },

The renderPost method errors out at doc.convertTo('html'); with the error:

TypeError: op.insert.indexOf is not a function
    at lineTypeConvert (document.js?c22f:114)
    at exports.Document.Document.convertTo (document.js?c22f:66)
    at VueComponent.renderPost (index.vue?dab4:323)
    at VueComponent.updated (index.vue?dab4:308)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at callUpdatedHooks (vue.runtime.esm.js?2b0e:4351)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4336)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

Any ideas on what could be going on?

Answer 1

I had to change quills-renderer to quill-delta-to-html which was able to render the quill delta which had inline images.