Issue when fetching with <prismic-rich-text :field="part.text"/>

Developing with Prismic
, ,
1

I am working on a Prismic site which is built with Vue that I've taken over.
All of this has been working before but stopped working probably a couple of months ago.

There is a newslisting page on the site which is called "SliceUpdate.vue" which looks like this:

<template>

<div class="slice-update">
  <div class="updates" v-match-heights="{el: ['.slice-update h3', '.slice-update h4', '.slice-update h5', '.slice-update .text'] }">
		
    <div v-for="(update, index) in reverseUpdates" :key="update.id" class="update">
			<template v-if="index <= updatesToShow -1">
        <update :part="update" />
			</template>
		</div>

		<div class="load-more" v-if="updatesToShow < totalUpdates">
			<a href="#" @click.prevent.stop="showMore()">{{ $t('ns.load_more') }}</a>
		</div>
  </div>	
</div>

</template>

<script>

import update from '~/components/part/partUpdate.vue'

export default {
  props: ['slice'],
  components: {
    update
  },
  name: 'slice-update',
   data() {
    return {
      updatesToShow: 12,
      totalUpdates: 0,
      trigger: 0
    };
  },
  computed: {
    reverseUpdates() {
      return this.slice.items.slice().reverse();
    }     
  },
  methods: {
  	showMore() {
  		this.updatesToShow += 2

  		// Trigger vue-match-heights
  		setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
      },10);

  	}
  },
  mounted() {
  	this.totalUpdates = this.slice.items.length
  }
}
</script>

`And inside of this it's picking up the "partUpdate.vue" file which looks like this:

<template>
 
<div class="part-update">

    <figure :style="{ backgroundImage: 'url(' + part.image.url + ')', backgroundPosition: ''+ part.image_focus +'' }"></figure>
    <prismic-rich-text class="header" :field="part.header"/>
    <div class="text">

      <div class="text-part">
        <prismic-rich-text class="header" :field="part.text"/>
      </div>
    </div>

</div>

</template>

<script>
export default {
  props: ['part'],
}
</script>

Suddenly now the update page is showing "Missing Stack Frames" and I get a npm error saying:

 ERROR  [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'substring')"                                                                                                                                               12:16:15

found in

---> <Update> at components/part/partUpdate.vue
       <SliceUpdate> at components/slices/SliceUpdate.vue
         <SlicesBlock> at components/SiteSlices.vue
           <Page> at pages/page/_uid.vue
             <Nuxt>
               <Layouts/default.vue> at layouts/default.vue
                 <Root>

I've tried a couple of things and narrowed down to that if I remove this line:

<prismic-rich-text class="header" :field="part.text"/>

Everything works except I don't see any text of course.
So it can load in all other fields except for the text-field, and I've double checked the name and that's correct.

I can't for my life understand what's wrong and what to even start looking at. Could someone point me in the right direction?
Thank you!

3

Okay so an update here. I've tried numerous things but if I take a look at the API I can see that everything is there. Under "updates".

(Link: https://norburg-and-scherp.cdn.prismic.io/api/v2/documents/search?ref=ZtqzZhIAACAAEvIh )

I could without a problem use

<prismic-rich-text class="header" :field="part.header.text"/>

To output my headers and all of the headers would be rendered. So i tried a couple of things. First of all I added a new repeater field called alt_text and populated it. It shows up in the JSON but doing:

<span style="border: 1px solid red;"><prismic-rich-text  :field="part.alt_text.text"/></span>

Returns nothing and I get a Vue terminal error saying:

ERROR  [Vue warn]: Invalid prop: type check failed for prop "field". Expected Array, got Undefined

I then continued by changing the api name of the header prop to "headerr" just to try it out. It did not render anymore so I changed it back to "header" and now it won't render anymore either using:

<prismic-rich-text class="header" :field="part.header.text"/>

So now I can't render "text" or "header", but Image still works so I can get the thumbnails. I'm not really sure at all what is happening. Something that has been working before and now suddenly just stops working??

Right now the only error I get all the time is:

ERROR  [Vue warn]: Invalid prop: type check failed for prop "field". Expected Array, got Undefined

Please help

4

Hey team. I'd suggest rendering each layer one by one to find out which part is breaking the code. Start by logging the content of the part.text field before it renders. If the field exists in the API response, the issue might be in how the field or slice name is being called.

Also, double-check if the field data is structured as expected. There could be a missing or null value causing the error. Logging should help reveal if that's the case.