Adding smart rules makes module disappear from the published website

[jason-k]

I recently discovered that some modules had disappeared from my published website. The common factor among them was that they all had smart rules applied (device type).

While these modules remain visible in the HubSpot editor and preview, they do not appear on the live site. However, as soon as I removed the smart rules from one of the modules, it reappeared on the published website.

The modules were built using HubSpot CMS React.

In the developer console of the live webpage, the following error appears: "Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=422"

How can I resolve this?

Thank you

[GRajput]

Hi @jason-k 

The issue stems from how HubSpot CMS React processes smart rules for device types, potentially causing an SSR/CSR mismatch. The error (Minified React error #418, invariant 422) suggests a rendering issue, likely due to inconsistencies between server-side and client-side React output. Test the modules across different devices and try removing and reapplying the smart rules.

If the problem is related to SSR/CSR conflicts, implement client-side rendering using the use effect to update the state after the page loads. If the modules appear in the HubSpot preview but not on the live site, consider adjusting smart rule conditions, such as using the user agent instead of the device type.

If the issue persists, contact HubSpot Developer Support, as it might be a platform-related concern.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!