When JSS component is hidden via personalization Experience Editor show warning about missing "Hidden Rendering" implementation

Question

After applying personalization rule to JSS component and using option to hide, Experience Editor shows warning that "Hidden Rendering" is not implemented in React, which is not too friendly for content authors.

This message appears only in Experience Editor editing mode. In non-edit mode layout service doesn't return the component at all and the issue doesn't exist.

Answer 1

To fix the issue you need to implement React component for this rendering. The problem is that layout service returns it with space in name, so your componentFactory.js should have following generated output to register such component:

import HiddenRendering from '../helpers/HiddenRendering';
components.set('Hidden Rendering', HiddenRendering);

To achieve this modify generate-component-factory.js to:

return `/* eslint-disable */
// Do not edit this file, it is auto-generated at build time!
// See scripts/generate-component-factory.js to modify the generation of this file.
${imports.join('\n')}
import HiddenRendering from '../helpers/HiddenRendering'
const components = new Map();
${registrations.join('\n')}
components.set('Hidden Rendering', HiddenRendering);
export default function componentFactory(componentName) {
  return components.get(componentName);
};
`;

Then implement HiddenRendering component in /src/helpers/HiddenRendering.js with some content authors friendly message. You don't need to check for normal/edit mode, cause component will appear only in Experience Editor edit mode:

import React from 'react';

const HiddenRendering = () => {
  return (
    <div>This component variant will be hidden in non-edit mode.</div>
  );
};

export default HiddenRendering;

Note that component is implemented outside of /src/components folder for it not to be picked up by the generate-component-factory.js script as a normal component.