PrismicDOM.RichText.asHtml error (pug)

Developing with Prismic
1

Hello there,
I'm very new to Prismic and to front-end development in general.
I'm sure I'm making some stupid mistake here.

I have a Rich Text tab in a field. I am not able to get it to work. I'd like to render the rich text on the page. Using express and pug.

block content
  section.studies
    each description in about.data.description
      p.studies__text!=PrismicDOM.RichText.asHtml(description.text)

details of the error below:

TypeError: H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\views\pages\about.pug:9
[0]     7|   section.studies
[0]     8|     each description in about.data.description
[0]   > 9|       p.studies__text=PrismicDOM.RichText.asHtml(description.text)
[0]     10|
[0]
[0] e.reduce is not a function
[0]     at Function.value (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\prismic-dom\dist\prismic-dom.min.js:1:9715)
[0]     at Object.t.default [as serialize] (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\prismic-dom\dist\prismic-dom.min.js:1:17312)
[0]     at Object.asHtml (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\prismic-dom\dist\prismic-dom.min.js:1:4865)
[0]     at eval (eval at wrap (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:131:77)
[0]     at eval (eval at wrap (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:144:4)
[0]     at template (eval at wrap (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:147:7)
[0]     at Object.exports.renderFile (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:454:38)
[0]     at Object.exports.renderFile (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:444:21)
[0]     at View.exports.__express [as engine] (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:493:11)
[0]     at View.render (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\express\lib\view.js:135:8)
3

Hello @pablizyocka

Welcome to the Prismic community, and thanks for reaching out to us.

Try to change your code with it:

p !{PrismicDOM.RichText.asHtml(description.text)}

If it still doesn't solve the issue, I'd be happy to debug it more.

Thanks,
Priyanka

4

Hello Priyanka,
thanks a lot!
Unfortunately that gives an 'unexpected text' error.
An 'e.reduce is not a function' occurs if I leave the space after the 'p' as in your syntax.
Below:

    9|   section.studies
    10|     each description in about.data.description
  > 11|       p!{PrismicDOM.RichText.asHtml(description.text)}
---------------^
    12| 

unexpected text "!{Pri"
    at makeError (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-error\index.js:34:13)
    at Lexer.error (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-lexer\index.js:62:15)
    at Lexer.fail (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-lexer\index.js:1629:10)
    at Lexer.advance (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-lexer\index.js:1694:12)
    at Lexer.callLexerFunction (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-lexer\index.js:1647:23)
    at Lexer.getTokens (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-lexer\index.js:1706:12)
    at lex (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-lexer\index.js:12:42)
    at Object.lex (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:104:9)
    at Function.loadString [as string] (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-load\index.js:53:24)
    at compileBody (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:82:18)

And that is the other type error:

    9|   section.studies

    10|     each description in about.data.description

  > 11|       p !{PrismicDOM.RichText.asHtml(description.text)}

    12| 

e.reduce is not a function
    at Function.value (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\prismic-dom\dist\prismic-dom.min.js:1:9715)
    at Object.t.default [as serialize] (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\prismic-dom\dist\prismic-dom.min.js:1:17312)
    at Object.asHtml (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\prismic-dom\dist\prismic-dom.min.js:1:4865)
    at eval (eval at wrap (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:130:66)
    at eval (eval at wrap (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:143:4)
    at template (eval at wrap (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:146:7)
    at Object.exports.renderFile (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:454:38)
    at Object.exports.renderFile (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:444:21)
    at View.exports.__express [as engine] (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\pug\lib\index.js:493:11)
    at View.render (H:\MYPORTFOLIO\2021-oct\boilerplate2021-oct1\node_modules\express\lib\view.js:135:8)

I'm sure we're getting closer to the right syntax for this. Thanks again!

5

Can you please tell me what is a type of "text" field you are passing in? Is
Is it a Rich text field or a Key text field? Can you please send me the logs of the Data object when you query the API?

6

The field is Rich Text (only bold editing is enabled).
I loop through it to get individual paragraphs.

My current working snippet (not showing the rich text editing) is the following:

section.studies
    each description in about.data.description
      p.studies__text=description.text

Below the 'about' object response:

app listening at http://localhost:3000
[0] {
[0]   id: 'YWvfvhQAACAAyehr',
[0]   uid: null,
[0]   url: null,
[0]   type: 'about',
[0]   href: 'https://paoloiocca.cdn.prismic.io/api/v2/documents/search?ref=YW0g9hQAACAAz3tv&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22YWvfvhQAACAAyehr%22%29+%5D%5D',
[0]   tags: [],
[0]   first_publication_date: '2021-10-17T08:33:08+0000',
[0]   last_publication_date: '2021-10-17T08:37:42+0000',
[0]   slugs: [ 'about' ],
[0]   linked_documents: [],
[0]   lang: 'en-us',
[0]   alternate_languages: [],
[0]   data: {
[0]     title: 'About',
[0]     description: [ [Object], [Object], [Object], [Object] ]
[0]   }
[0] }

Thanks! Perhaps wrong setting in the repo field?

7

It seems the API ID of the rich text field is description not text. You need to access it with the API ID.

Try with this:

p !{PrismicDOM.RichText.asHtml(description)}

8

The output is the exact same error type, unfortunately...
the snippet I used is:

section.studies
    each description in about.data.description
      p !{PrismicDOM.RichText.asHtml(description)}

both with and without space between 'p' and '!'

9

I am not sure what is wrong here.

Please share the following with me:

  1. Zip file of your project or Github repo.
  2. The Prismic repo link

You can send me a private message though.

Thanks,
Priyanka

10

I'm not able to share the project at the moment, but will send you a private message when I get there.

In the meanwhile, thanks again - I appreciate it!

11

@pablizyocka No problem. Send me a private message whenever you get it. I'll be happy to debug it.

15

Hello @pablizyocka

How have you been?

Did you manage to run your project? There is one thing I noticed in the code snippet that you don't need to apply a loop to template each Rich text description. You need to template it like this:

section.studies
  != PrismicDOM.RichText.asHtml(about.data.description)

Let me know if you have further questions related to it.

Thanks,
Priyanka

16

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.