I am trying to render a custom Next.js component for XM Cloud. In the Experience Editor that component shows the following error:
JSS component is missing React implementation. See the developer console for more information.
Here is what I see in the console:
I have attempted the next approaches to resolve the above error:
- Ensured that the same name is used in the rendering and component factory;
- Verified the app name, configurations in the layout service factory page;
- Cloned one of the existing renderings to check it, but it didn't appear correctly in the Experience Editor neither.
Let me know if you have fixes, solution or suggestions for it.
Please NextJs Component/Variant Code:
import React from 'react';
import {
Image as JssImage,
Link as JssLink,
RichText as JssRichText,
ImageField,
Field,
LinkField,
Text,
} from '@sitecore-jss/sitecore-jss-nextjs';
interface Fields {
PromoIcon: ImageField;
PromoText: Field<string>;
PromoLink: LinkField;
PromoText2: Field<string>;
}
type HellocompProps = {
params: { [key: string]: string };
fields: Fields;
};
const HellocompDefaultComponent = (props: HellocompProps): JSX.Element
=> (
<div className={`component promo ${props.params.styles}`}>
<div className="component-content">
<span className="is-empty-hint">Promo</span>
</div>
</div>
);
export const Default = (props: HellocompProps): JSX.Element => {
const id = props.params.RenderingIdentifier;
if (props.fields) {
return (
<div className={`component promo ${props.params.styles}`} id={id ? id
: undefined}>
<div className="component-content">
<div className="field-promoicon">
<JssImage field={props.fields.PromoIcon} />
</div>
<div className="promo-text">
<div>
<div className="field-promotext">
<JssRichText field={props.fields.PromoText} />
</div>
</div>
<div className="field-promolink">
<JssLink field={props.fields.PromoLink} />
</div>
</div>
</div>
</div>
);
}
return <HellocompDefaultComponent {...props} />;
};