Cannot render RichText component in pages

Developing with Prismic
1

ReferenceError: RichText is not defined
using following deps:

 "@prismicio/client": "^5.1.0",
    "next": "12.0.7",
    "prismic-reactjs": "1.3.4",
    "react": "17.0.2",
    "react-dom": "17.0.2"

when trying to render RichText function component:

<RichText render={content.desc} />

Summary

Unhandled Runtime Error

ReferenceError: RichText is not defined

Call Stack

...
file:/home/_dev/Desktop/GitHub/test-prismic-nextjs-pages/.next/static/chunks/main.js (567:1)

options.factory

/_next/static/chunks/webpack.js (633:31)

webpack_require

file:/home/_dev/Desktop/GitHub/test-prismic-nextjs-pages/.next/static/chunks/webpack.js (37:33)

webpack_exec

/_next/static/chunks/main.js (1236:61)

file:/home/_dev/Desktop/GitHub/test-prismic-nextjs-pages/.next/static/chunks/main.js (1237:53)

webpackJsonpCallback@http://localhost:3000/_next/static/chunks/webpack.js?ts=1641160916423 (1179:46)

/_next/static/chunks/main.js (9:61)

project has been setup following prismic docs

to work the approach was to render it first in a react component, then export to page.

3

Hello @itaconect.desenvolve

Thanks for reaching out to us.

ReferenceError: RichText is not defined usually comes when you are not importing RichText from prismic-reactjs in your project file where you are rendering the Rich Text field.

Are you importing the RichText from prismic-reactjs library?

import {RichText} from 'prismic-reactjs';

If it still doesn't solve your issue, I'd be happy to dig it more with you.

Thanks,
Priyanka

4

Are you importing the RichText from prismic-reactjs library?
import {RichText} from 'prismic-reactjs';

Yes, I do, but I use it as function inside getStaticProps:

RichText.asText(contentRes.data.title);

and the function import, for some reason, can't be used as react component after that, but the same, inside page render, works like this:

{RichText.render(content.description)}

However this method doesn't allow to pass a Serializer function..

Another approach was to create a dynamic import for richtext:

const DynamicRichText = dynamic(() => import("prismic-reactjs").then((mod) => mod.RichText));

it works well <DynamicRichText render={content.description} />, although nextjs cannot refer the same RichText in page is confusing.

for me it's not clear yet if its caused by React or Nextjs, as I'm not really experienced with both..

5

Hello @itaconect.desenvolve

If your desc is a Rich Text object, it should work with the <RichText render=..... /> method. Can you remove prismic-reactjs library from the pacakge.json file and install it again with the command npm i prismic-reactjs.

However, you can also pass the serializer function in the Rich Text helper function.

If it still doesn't solve your issue, I'd need your source code( Github repo or Zip project) and Prismic repo name. You can send me a private message, though.

Thanks,
Priyanka