t.reduce() is not a function

[ykcai]

Using VueJS

Uncaught (in promise) TypeError: t.reduce is not a function
   at Function.t.fromRichText (prismic-dom.min.js?1613:8)
   at Object.e [as serialize] (prismic-dom.min.js?1613:8)
   at Object.asHtml (prismic-dom.min.js?1613:1)

Aside from the fact its uncaught, I am getting this error when pushing a new page or creating a new component that is fetching Prismic data.

Scenario 1

1. Parent loads Prismic data
2. Data is passed to children
3. Child routes/navigates (browser is not refreshed) back to parent
4. Upon returning to parent, data is fetched again but results in the error above

Scenario 2

1. Page has a component A that fetches Prismic data
2. Navigate/route (browser is not refreshed) to a different page using that component A
3. Component A does not load due to the error above

Should I be using a store or something to only fetch the data once? Why does fetching it again fail?
My code looks like this:

prismicData.title = PrismicDOM.RichText.asHtml(
	response.data.title,
	this.linkResolver
)...

[loafalkman]

Any news about this? I also get this error in my vue project.

[josepjaume]

Happens to me as well.

[josepjaume]

Hi! It looks like the issue is that you're probably using the V1 API instead of the V2.

[chris-ruzin-volusion]

Any update on this? I'm also seeing this error. I'm positive my results are V2 API results.

[levimykel]

Hey everyone, sorry for the delayed response. We actually have a Vue.js plugin here that is meant to be used instead of this library:
https://github.com/prismicio/prismic-vue

I suggest using this for your Vue projects to render your Rich Text fields.

[chris-ruzin-volusion]

What if we're not using Vue?

[levimykel]

If you're not using Vue can you submit this issue via the chat support on the prismic.io website or from your Prismic repository?

[actuallyrob]

I am experiencing the same problem using vue. It seams to occur when I want to use Prismic rich text outside of the router view (in my navbar and footer).

[mikehwagz]

This error occurred for me when i had a rich text field with only list items, and instead of passing the full array of list items into PrismicDOM.RichText.asHtml, i was looping over each item using v-for and then attempting to pass the individual items into PrismicDOM.RichText.asHtml. Once i removed the v-for and passed the entire array of list items into the function, everything rendered properly.

[arajay]

Hello. I am getting this error on the v2 api using the primsic-vue plugin (prismic-rich-text) whether or not I am in a v-for loop.

[tomgalpin]

I am having the same issue and submitted an issue as well.
Additionally, my browser is hanging when I get this error. Often times just on a typo. It is driving me crazy and is super jenky. I have to restart my local server, shut down my browser window, which sometimes doesn't work, and then open a new window.

Please fix.

[hendrikbursian]

I'm getting the same error when using Vue with the Composition Api.

EDIT: Sorry for bothering you. I figured out that the element I was sending into the asHtml method was null which caused the error. Making sure richText is defined in the following case fixed it for me.
PrismicDOM.RichText.asHtml(richText, linkResolver, htmlSerializer).

Kind regards

[lihbr]

Hey, I'm sorry we failed to give this issue any attention until then. We'll make sure to take that into account as we move forward with this kit. We're currently reworking it to provide first-class TypeScript support and a better interface ☺️

[lihbr]

OK, I investigated a bit this issue.

I can confirm that API v2 rich text and title fields consistently return an array, even when freshly created and new. With that in mind when you have a Prismic document feature one of those fields it should never be null and leading to that kind of error.

What might happen above is the following scenario:

• Component A uses asHtml helper and relies on data coming from Prismic;
• When rendered, component A might not have yet data from Prismic because asynchronous;
• This causes the soon-to-be rich text field provided to the helper to be undefined, leading to this error.

If you think that's the scenario you're experiencing I'd recommend conditionally rendering that component depending on if Prismic data are there.

In the next version of this package, we'll have more failsafe to prevent that behavior.