JSS component is missing React implementation. See the developer console for more information. In XM Cloud portal (SXA-JSS)

Question

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:

1. Ensured that the same name is used in the rendering and component factory;
2. Verified the app name, configurations in the layout service factory page;
3. 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} />;
};

Answer 1

Please verify 2 things one more time.

1. Component name property of the rendering in sitecore should match with the name of a react component.

2. In your react component you should have correct export default statement, You should also export the rendering variant if you have any. See screenshot for dummy react component code

Answer 2

The problem you are having is that you haven't deployed your code to your XM Cloud instance. The react implementation is missing on the rendering host that is used for editing. You need to commit your code to your repo and use the XM Cloud Deploy app to redeploy your environment and get your code to the rendering host.

When you are using the XM Cloud Experience Editor/Pages - it is running the Next.js application via a Sitecore hosted node.js service. This gets deployed with your application code.

If you add a new variant or a new component in the Content Editor, you need to have a corresponding react/next.js component (.tsx/.jsx file). Once you have added that component to your source code, you need to commit that and deploy the latest code via the XM Cloud Deploy app so that your rendering host for editing has the the component.

If you don't do that, you will see the error you are getting.