We are using Sitecore-10.3/Headless/SXA/NextJS. When we build a custom new component with few custom variants, we receive errors. We will not receive this when we use the "Default variant".

Steps to reproduce

  1. Create a new headless component(rendering)
  2. Add a rendering variant example "CustomVariant", other than the "Default" variant
  3. Go to experience editor and assemble this component on the page.
  4. Change the variant to "CustomVariant"
  5. Save the page, Immediately you will receive an error in the experience editor as like below,

Connection to your rendering host failed with an Internal Server Error error. Ensure the POST endpoint at URL http://localhost:3000/api/editing/render has been enabled. 6. Go to the NextJS application and check the same page.


Server error

TypeError: Cannot read properties of undefined (reading 'CustomVariant')


src\temp\componentFactory.ts (90:21) @ exportName

  88 | 
  89 | if (exportName && exportName !== DEFAULT_EXPORT_NAME) {
  90 |   return component[exportName];
     |                   ^
  91 | }
  92 | 
  93 | return component?.Default || component?.default || component;

enter image description here


This issue is not happening when you assign the "Default" variant to the component.

1 Answer 1


This issue is happening when your NextJS doesn't contain a component code with the default variant.

To fix this issue, create a NextJS component code with a default variant at least. Then you can see at least the below component missing panel on your page, instead of an error.

enter image description here

Your Answer

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

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