1

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.

enter image description here

Here is what I see in the console:

enter image description here

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} />;
};
8
  • Have you deployed your code?
    – Richard Seal
    May 27 at 2:48
  • I am working on XM Cloud portal and sxa-jss nextjs project on vs code.. I run it on connected mode, suppose to work new created component. Where should i deploy it?
    – Prem Murmu
    May 27 at 5:27
  • If you have custom variant for this component, make sure your code is having rite export statement. like this Ex: export const CustomVariantCompnentName = {You component defintion}; @PremMurmu
    – Andi AR
    May 28 at 15:43
  • Check a similar question here, it provides some good solutions. May 28 at 16:01
  • @PremMurmu Can you please share the code of your react component code? I am suspecting there is some issue in that.
    – Gautam
    May 29 at 9:03

2 Answers 2

0

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.

enter image description here

  1. 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

enter image description here

3
  • I try it and respond back.
    – Prem Murmu
    yesterday
  • I didn't help. thanks
    – Prem Murmu
    yesterday
  • Thanks @PremMurmu, One more thing can you please share the screenshot of "ComponentFactory.ys file"? Inside your "app\src\temp" folder.. I was able to replicate the same error with some changes in my code and wanted to be sure.
    – Gautam
    yesterday
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.