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.

enter image description here

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.

1 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.
import HiddenRendering from '../helpers/HiddenRendering'
const components = new Map();
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.

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.