Headless/SXA/Next.JS : Server error : TypeError: Cannot read properties of undefined (reading 'CustomVariant')

Question

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.

Error:

Server error

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

Source

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;

NA

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

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.