[RAV][nextjs] Ensure component works when default personalization variant is hidden

packages/sitecore-jss-angular/src/components/placeholder.component.spec.ts

@@ -229,6 +229,35 @@ describe('<sc-placeholder />', () => {
     });
   }));
 
+  it('should skip rendering components with no name', async(() => {
+    const phKey = 'main';
+    const route = {
+      placeholders: {
+        main: [
+          {
+            componentName: 'Home',
+          },
+          {
+            componentName: null,
+          },
+        ],
+      },
+    };
+
+    comp.name = phKey;
+    comp.rendering = (route as unknown) as ComponentRendering;
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+
+      expect(de.children.length).toBe(1);
+
+      const homeDiv = de.query(By.directive(TestHomeComponent));
+      expect(homeDiv).not.toBeNull();
+    });
+  }));
+
   it('should render null for unknown placeholder', async(() => {
     const phKey = 'unknown';
     const route = {

packages/sitecore-jss-react/src/components/Placeholder.test.tsx

@@ -515,6 +515,40 @@ it('should render MissingComponent for unknown rendering', () => {
   expect(renderedComponent.find('.missing-component').length).to.equal(1);
 });
 
+it('should render nothing for rendering without a name', () => {
+  const componentFactory: ComponentFactory = (componentName: string) => {
+    const components = new Map<string, React.FC<{ [key: string]: unknown }>>();
+
+    const Home: React.FC<{ rendering?: RouteData }> = ({ rendering }) => (
+      <div className="home-mock"></div>
+    );
+
+    components.set('Home', Home);
+    return components.get(componentName) || null;
+  };
+
+  const route: any = {
+    placeholders: {
+      main: [
+        {
+          componentName: 'Home',
+        },
+        {
+          componentName: null,
+        },
+      ],
+    },
+  };
+  const phKey = 'main';
+
+  const renderedComponent = mount(
+    <div className="empty-test">
+      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+    </div>
+  );
+  expect(renderedComponent.children().length).to.equal(1);
+});
+
 it('should render HiddenRendering when rendering is hidden', () => {
   const route: any = {
     placeholders: {

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx

@@ -211,6 +211,8 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
 
         if (componentRendering.componentName === HIDDEN_RENDERING_NAME) {
           component = hiddenRenderingComponent ?? HiddenRendering;
+        } else if (!componentRendering.componentName) {
+          component = () => <></>;
         } else {
           component = this.getComponentForRendering(componentRendering);
         }

packages/sitecore-jss-vue/src/components/Placeholder.test.ts

@@ -244,6 +244,29 @@ describe('<Placeholder />', () => {
       warnSpy.mockReset();
     });
 
+    it('should render nothing when component name is empty', () => {
+      const route = {
+        placeholders: {
+          main: [{ componentName: 'Home' }, { componentName: 'SfcHome' }, { componentName: null }],
+        },
+      };
+
+      const testComponent = {
+        render() {
+          return h(Placeholder, {
+            name: 'main',
+            rendering: route as any,
+            componentFactory,
+          });
+        },
+      };
+
+      const renderedComponent = mount(testComponent);
+      expect(renderedComponent.html()).toMatchSnapshot();
+
+      warnSpy.mockReset();
+    });
+
     it('should render specific missing component for unknown components', () => {
       const missingComponent = defineComponent({
         inheritAttrs: false,

packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts

@@ -122,7 +122,7 @@ export function getVNodesForRenderingData(
         component = getComponentForRendering(rendering, componentFactory);
       }
 
-      if (!component) {
+      if (rendering.componentName && !component) {
         console.error(
           `Placeholder ${placeholderName} contains unknown component ${rendering.componentName}. Ensure that a Vue component exists for it, and that it is mapped in your component factory.`
         );

packages/sitecore-jss-vue/src/components/__snapshots__/Placeholder.test.ts.snap

@@ -15,6 +15,13 @@ exports[`<Placeholder /> missing component should render default missing compone
 </div>
 `;
 
+exports[`<Placeholder /> missing component should render nothing when component name is empty 1`] = `
+<div class="home-mock">
+</div>
+<div class="home-mock-sfc">
+</div>
+`;
+
 exports[`<Placeholder /> missing component should render specific missing component for unknown components 1`] = `
 <div class="home-mock">
 </div>