Nuxt > SSR > ReferenceError: document is not defined

[hpfahl]

Hello Marvin, first of all thank you very much for providing such a library!

I added the renderer component to my Nuxt application and now getting an "document is not defined" error in SSR mode.

render: function render(h) {
    var renderer = renderer_useRenderer(h, this._v, RichTextRenderervue_type_script_lang_ts_objectSpread({}, this.$richTextRenderer.options, {}, this.options));
    var renderNode = renderer.renderNode,
        renderNodeList = renderer.renderNodeList;
   ** if (document instanceof Array) { **
      return h('div', renderNodeList(this.document));
    } else {
      return renderNode(this.document);
    }
  }

Best regards, Heiko

[daaru00]

@hpfahl I think you can use the client-only component to exclude render on sever side:

<client-only>
    <rich-text-renderer :document="doc" />
</client-only>

but is just a workaround and also very annoying (need to encapsulate every text component in every page).

I have the same issue running Gridsome's build.. but in my case I have no workarounds, because being in a Jamstack I have to generate all content in a build pipeline without excluding any parts or it will never showed up in generated website.

---- edited ----

Just created a simple component using storyblok-js-client render function as temporary workaround: https://gist.github.com/daaru00/0598eefa0d4357a8f7b73556622dd031 (also works in SSR mode)

[m4rvr]

Sorry guys to hear that, I will check i! Thanks for your feedback. :)

[m4rvr]

It's a bug with the global document and the prop document. On the server-side the global document is not available that's why the error appears. Try out the new version here https://github.com/MarvinRudolph/storyblok-rich-text-renderer/tree/next or on npm https://www.npmjs.com/package/@marvr/storyblok-rich-text-vue-renderer. It's much much simpler and uses simple components as resolvers instead of complex JSX/TSX. :zap: