Tag: error

XM Cloud Dev Error: Hydration failed – while using XMC with Nextjs

Recently, I started receiving error-

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

This error was specifically while using RichText field.


Hyderation is when React converts the pre-rendered HTML from the server into fullly interactive application by attaching event handlers.

The common casue of this issue is incorrect nesting of HTML tags.

RichText is wrapped in div tag and received this error when the RichText was wrapped in <p> tag

Example where React throws error-

Incorrect way of wrapping RichText-
<p className="page-desc text-white mb-0"> 
   <RichText field={props.fields.Description} />

Remove the <p> tag or wrap RichText in <div> tag

Correct way-
<RichText className="page-desc text-white mb-0" field={props.fields.Description} />

Remvoing <p> might removing spacing between fields/components, this needs to be adjusted using CSS.




Error while starting the SOLR

Do you see this error while starting the SOLR?

Check the Environment Variable JAVA_HOME and if the path of the jre is correct.

In my case due to the recent JAVA sdk update the path was not changed in environmental variable to reflect the actual path.

So one of the issue could be the incorrect path. Change this to the actual path.

And here we have the SOLR service running