Issue to render a RichText with Prismic-reactjs in Gatsby

[xay.tanovan]

Hello,

I tried to install gatsby on my blog, and i want to render a RichText.
To get Data i use "gatsby-source-prismic": "^3.3.6" so i setup my gatsby-config with the right source and json file for the data of my custom type. I get Data with no issue.

Now when i want to render a RichText, by using <RichText render={document.body} /> i have this error:

when i console.log(document.body) it's an array.

Error in function eval in ./node_modules/prismic-reactjs/dist/prismic-reactjs.js:592 Cannot read property 'map' of undefined

var r = function (e) {

592 | var t = e.spans.map(function (t) {
593 | var n = e.text.slice(t.start, t.end);
594 | return new s.SpanNode(t.start, t.end, t.type, n, , t);
595 | }),

Can someone Help me on that please?

Thanks

[Phil (Phil Snow)]

Hi Xay,

What you are trying to do here pass the entire Slice Zone through the Rich Text component. This isn't possible, what you need to do is loop through your Slices and pass the Rich Text fields from the Slices to the Rich text component.

I would suggest you check out one of our Gatsby examples to see exactly how we do this:

Sample Blog with Prismic & Gatsby.js

Then see how to template Slices:

Templating Slices

Let me know if you have any questions.

Thanks.

[xay.tanovan]

Hey Phil,

in your example "Templating Slices" they cleary show that the field is a slice:

"body":[
            {
              "slice_type":"example_image_slice",
              "primary":{
                "example_image":{
                  "alt":"Productivity in the workplace",
                  "url":"https://images.prismic.io/repo/a1cdd5"
                }
              }
            },
            {
              "slice_type":"example_text_slice",
              "primary":{
                "example_title":{
                  "raw":[
                    {
                      "type":"paragraph",
                      "text":"The future is here.",
                      "spans":[]
                    }
                  ]
                }
              }
            }
          ]

In my example it's not the case it's a StructuredText

"body" : {
  "type" : "StructuredText",
  "config" : {
    "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
    "label" : "body",
    "labels" : [ "code", "quote", "table", "cta" ]
  }
}

and just to mention that before adding Gatsby to my project the render of that RichText was good by using:

<div className="body">
        <RichText render={bodyT} htmlSerializer={htmlSerializer} />
      </div>

which RichText was imported like this:

import { RichText, Elements } from 'prismic-reactjs';

I looked through the console log and the fetch data is exactly the same, it returned the same table.

[Phil (Phil Snow)]

OK, this is confusing then if you've named the rich text field body. Is this field in the Slice Zone or on the top level of the document?

Let's say we give the field an API ID of mytext, if the field is the top level of the document outside the Slice Zone then you would render it like so:

<RichText render={document.data.mytext} />

If it's in the Slice Zone and you've mapped the Slices and returned them with the variable slice then you'd render it as so:

<RichText render={slice.primary.mytext} />

[xay.tanovan]

Here is a screenshot of how it has been built on prismic side:

When i used asText instead of render it works but it's not what i want.

[Phil (Phil Snow)]

I would change the API ID of this field and then render it like so:

<RichText render={document.data.mytext} />

This is because, body is the default name that the Slice Zone is returned with.

[Phil (Phil Snow)]

My apologies I just checked the Gatsby docs and it should be

<RichText render={document.mytext.raw} />

Templating Rich Text fields

The raw part seems important for Gatsby, it's not my strongest area of knowledge.

[xay.tanovan]

In my data i don't have raw field:

When i tried to use the <RichText render={document.body.raw} />

I have this error:

[Pau]

Hello @xay.tanovan, could you show us an example of your query. Maybe the issue is coming from there.

Are you passing the correct schemas of each of your Custom Types to the plugin configuration?

[xay.tanovan]

ok i will check that and share with you what i have