E.reduce is not a function with PrismicDOM.RichText.asHtml

Developing with Prismic
1

I use PrismicDOM.RichText.asHtml with image type or Slice type but receive error: e.reduce is not a function or t.map is not a function. Could you help me fix it?
`PrismicDOM.RichText.asHtml(section, linkResolver, htmlSerializer)

index.js:1472 TypeError: Cannot read property 'map' of undefined
at prismic-dom.min.js:532
at prismic-dom.min.js:541
at Array.reduce (<anonymous>)
at Function.value (prismic-dom.min.js:528)
at Object.t.default [as serialize] (prismic-dom.min.js:1018)
at Object.asHtml (prismic-dom.min.js:238)
at prismic.js:86
at Array.map (<anonymous>)
at asHTML (prismic.js:79)
at prismic.js:117
at Array.forEach (<anonymous>)
at prismic.js:115`
3

Hi Tri,

Welcome to the Prismic Community Forum,

In order to be able to help with this, I need you to provide me with a code snippet of the code that is throwing the error with the full error stack to know in what line the library is breaking.

Looking forward to your reply,
Fares

4 
var PrismicDOM = require('prismic-dom');
var Elements = PrismicDOM.RichText.Elements;

var htmlSerializer = function (type, element, content, children) {
  switch(type) {
    case Elements.heading1: return `<h1>${children.join('')}</h1>`;
    case Elements.heading2: return `<h2>${children.join('')}</h2>`;
    case Elements.heading3: return `<h3>${children.join('')}</h3>`;
    case Elements.heading4: return `<h4>${children.join('')}</h4>`;
    case Elements.heading5: return `<h5>${children.join('')}</h5>`;
    case Elements.heading6: return `<h6>${children.join('')}</h6>`;
    case Elements.paragraph: return `<p>${children.join('')}</p>`;
    case Elements.preformatted: return `<pre>${children.join('')}</pre>`;
    case Elements.strong: return `<strong>${children.join('')}</strong>`;
    case Elements.em: return `<em>${children.join('')}</em>`;
    case Elements.listItem: return `<li>${children.join('')}</li>`;
    case Elements.oListItem: return `<li>${children.join('')}</li>`;
    case Elements.list: return `<ul>${children.join('')}</ul>`;
    case Elements.oList: return `<ol>${children.join('')}</ol>`;
    case Elements.image:
      var linkUrl = element.linkTo ? PrismicDOM.Link.url(element.linkTo, module.exports.linkResolver) : null;
      var linkTarget = element.linkTo && element.linkTo.target ? `target="${element.linkTo.target}" rel="noopener"` : '';
      var wrapperClassList = [element.label || '', 'block-img'];
      var img = `<img src="${element.url}" alt="${element.alt || ''}" copyright="${element.copyright || ''}">`;
      return (`
        <p class="${wrapperClassList.join(' ')}">
          ${linkUrl ? `<a ${linkTarget} href="${linkUrl}">${img}</a>` : img}
        </p>
      `);
    case Elements.embed:
      return (`
        <div data-oembed="${element.oembed.embed_url}"
          data-oembed-type="${element.oembed.type}"
          data-oembed-provider="${element.oembed.provider_name}"
        >
          ${element.oembed.html}
        </div>
      `);
    case Elements.hyperlink:
      var target = element.data.target ? `target="${element.data.target}" rel="noopener"` : '';
      var linkUrl = PrismicDOM.Link.url(element.data, linkResolver);
      return `<a ${target} href="${linkUrl}">${children.join('')}</a>`
    case Elements.label:
      var label = element.data.label ? ` class="${element.data.label}"` : '';
      return `<span ${label}>${children.join('')}</span>`;
    case Elements.span: return content ? content.replace(/\n/g, "<br />") : '';
    default: return null;
  }
};
5 
const linkResolver = (doc) => {
  // Pretty URLs for known types
  if (doc.type === 'blog') return "/post/" + doc.uid;
  if (doc.type === 'page') return "/" + doc.uid;
  // Fallback for other types, in case new custom types get created
  return "/doc/" + doc.id;
};
6

Thank for your response @Fares , My code is above

1 Like
7

Hi Tri,

Can you please tell us what is the type of "section" field you are passing in PrismicDOM.RichText.asHtml(section, linkResolver, htmlSerializer) ?

normally this error comes from passing a key text field to the asHtml method.

If that is not the case, then can you please provide us with your repository name (in a private message if necessary) so that we check this for you.

Looking forward to your reply,

8

Thank you for your answer @Fares the type of section is body (or Slices type).

9

Hi,

Have you managed to solve the issue? if not I'm not sure I've got your repository name to be able to investigate further the issue!

11

HI,

I've been discussing with my team, it seems that this issue can be because you are passing a Slice Zone to a Rich Text method.

Can you please check?

1 Like
12

Thank for you support, so do we have a method for Slice Zone?

13

hello @Fares Could you help me?

14

Hi,

Well, it depends on what technology you are using, if you are using pure javaScript then your query would look like this:

var PrismicDOM = require('prismic-dom');

document.data.body.map(function(slice) {
    // Render the right markup for a given slice type
    switch(slice.slice_type) {
        case 'text': return PrismicDOM.RichText.asHtml(slice.primary.rich_text)
        case 'image-gallery': 
            return slice.items.map(function(image) {
                 return image.gallery_image.url
            })
    }
})

Where the body property the document.data object is your sliceZone that includes a list of slices, to learn more about templating slices in JS please refer to the document.

15

Thank you @Fares I got it.

1 Like