prismicH.asHTML() Pug Error - Can not read properties of undefined

Developing with Prismic
,
1

Hello all,

I am using Prismic with Express and Pug. I've been trying to render a rich text field which is a part of a slice (called content). I would like to take advantage of the prismic helpers (prismicH.toHTML()) but I'm running into an error when I use prismicH in the .pug file.

Cannot read properties of undefined (reading 'asHTML')

image
image1034×111 4.11 KB

The field is a rich text field. Screenshot of the slice below:

image
image406×628 21.2 KB

Here's the .pug code.

           each slice in document.data.body
				if slice.slice_type == 'title'
					h2.about__title=slice.primary.title_text
				if slice.slice_type == 'content'
						section.about__content
							.about__contnet__wrapper 
								p.about__content__label=slice.primary.content_label								 
                                   .about__content__details=prismicH.asHTML(slice.primary.content_details)

Here's the weird part. If I use prismicH.asHTML in express and console.log the result, I get the correct response.

Express.js /about Route:

  app.get('/about', async (req, res) => {
    const document = await client.getSingle('about')
    document.data.body.forEach(section => {
      console.log(section.primary)
      if (section.slice_type == 'content'){
        console.log(prismicH.asHTML(section.primary.content_details))
      }
    })

Express Response from code above

image
image1886×421 22.1 KB

As you can see, the strong and em tags are applied when I console.log the result in express, but attempting to use the same syntax in pug results in the error above. Sorry if this is a newby question, I'm fairly new to front end development.

Any help is appreciated. I can send my repo or any additional information if needed. Thank you!

2

Also of note, if I bypass the prismicH.asHTML function and put content_details on a simple p tag, it prints out the object.

image

Code:

				if slice.slice_type == 'content'
						section.about__content
							.about__contnet__wrapper 
								p.about__content__label=slice.primary.content_label
								p.test__content=slice.primary.content_details
								//- .about__content__details=prismicH.asHTML(slice.primary.content_details)
4

Hello @mgcherneski

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

How are you setting Middleware to set local variables (prismicH) in the app.js file? Could you please paste that file?

Thanks,
Priyanka

5

Hello @Priyanka, thanks for the quick reply!

Here's the middleware.

app.use((req, res, next) => {
  res.locals.ctx = {
    prismicH,
  }
  next()
})

I got it from here. Set up Prismic with Express - Documentation - Prismic

Update:

I got the html, with markup, to appear on the site by prefixing ctx before prismicH on my .pug file.

New Version:

				if slice.slice_type == 'content'
						section.about__content
							.about__contnet__wrapper 
								p.about__content__label=slice.primary.content_label
								.about__content__details=ctx.prismicH.asHTML(slice.primary.content_details)

The markup on the webpage:

image
image1233×84 6.58 KB

6

Quick final update, in order to get the HTML to render as HTML rather than with escaped tags, I needed the ! character. Final code looks like this:

.about__content__details!=ctx.prismicH.asHTML(slice.primary.content_details)

Thanks for the help! I'm going to close the issue.

7

Great. I am happy to help. Feel free to reach out to us if you have any questions.

1 Like