PrismicRichText not displaying anything

Developing with Prismic
1

I have the following basic page set up:

<template>
  <div v-if="blog">
    <PrismicText :field="blog.title" wrapper="h1" class="text-2xl font-bold" />
    <PrismicRichText :field="blog.body" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { PrismicDocument } from "@prismicio/types";
import { usePrismic, PrismicText } from "@prismicio/vue";
import { useRouter } from "vue-router";
import { PrismicRichText } from "@prismicio/vue";

const { client } = usePrismic();
const router = useRouter();

const blog = ref<PrismicDocument | null>(null);

async function getContent() {
  const res = await client.getByUID(
    "post",
    router.currentRoute.value.params.uid
  );
  blog.value = res.data;
  console.log(blog.value);
}

onMounted(getContent);
</script>

<style scoped></style>

The PrismicRichText isn't displaying anything though. Even though the blog.body does have content underneath. When inspecting the element in Vue Tools, I do see that the element does have the correct field:

field:Array[3]
0:Reactive
1:Reactive
2:Reactive

The title is being display just fine. What is going wrong here?

2

Hi Boris,

Your array should contain 3 objects with type and text as values, does this work on any other pages?

Is your console giving you any warnings/errors? you may need to add the 'html-serializer' to your project.

Also have you tried a variable like below to see if it outputs correctly?

const textContent = [{
  text: 'some test content',
  type: 'paragraph'
}]

<PrismicRichText :field="textContent" />

3

Hi Jake,
Correct, the array has 3 objects, it does not work on other pages. Also added a custom htmlSerializer does not work. When adding the variable like you mentioned, i get:

runtime-core.esm-bundler.js:557 TypeError: Cannot read properties of undefined (reading 'length')
    at textNodeSpansToTreeNodeChildren (asTree.ts:124:13)
    at nodeToTreeNode (asTree.ts:103:4)
    at asTree (asTree.ts:33:17)
    at serialize (serialize.ts:23:3)
    at asHTML (asHTML.ts:147:10)
    at ReactiveEffect.fn (PrismicRichText.ts:124:10)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at get value [as value] (reactivity.esm-bundler.js:1150:39)
    at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js:1693:31)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)

This error does not occur when accessing the blog body.

4

Ok hmm, what about with an empty span although the above worked fine for me.

const textContent = [{
    spans: [],
    text: 'some test content',
    type: 'paragraph'
}]

Are you able to share a reproducible copy of your repo?

5

@jake GitHub - Bowis/prismic-issue

6

Hi Boris,

You're trying to pass 3 slices to the Prismic RichText component, this won't work and you'll need to use the awesome Slicezone tool/component.

I've imported the Slicezone for you below. Please be aware there are no slices in your project so you'll need to create these. I've also set the textContent to work in the RichText component for a working example.

<template>
  <PrismicRichText :field="textContent" />

  <SliceZone
    v-if="blog"
    :slices="blog.body"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { PrismicDocument } from "@prismicio/types";
import { usePrismic, PrismicRichText, SliceZone } from "@prismicio/vue";

const { client } = usePrismic();

const blog = ref<PrismicDocument | null>(null);

async function getContent() {
  const res = await client.getByUID(
    "post",
    "peace-on-earth-a-wonderful-wish-but-no-way"
  );
  blog.value = res.data;
  console.log(blog.value);
}

const textContent = [
  {
    spans: [],
    text: "some test content",
    type: "paragraph",
  },
];

onMounted(getContent);
</script>
9

To fix this, there are a few things you can check:

  1. Verify that the API call to retrieve the content is working correctly and returning the expected data.
  2. Check the implementation of the code that is rendering the rich text fields. Make sure that the proper HTML tags are being used to display the content, and that any custom styles for the rich text fields are correctly defined in your CSS.
  3. If you are using a specific library, such as React, to render the content, make sure that you have correctly imported and configured the library, and that you are using the correct methods to render the rich text fields.

If you are still having trouble, it may be helpful to consult the documentation or reach out to the support team for the technology you are using (e.g. Prismic or React).
For More : https://goappsplay.com/