(SiteCore newbie here)

I'm currently working on a JSS React project. I created an Icons component which will export different icons as named exports:

export const Icon1 = () => <svg>...</svg>;
export const Icon2 = () => <svg>...</svg>;

But when attempting to use one of those in a page, I got the following message:

Attempted import error: '../components/Icons' does not contain a default export (imported as 'Icons').

After reading the script which generates the componentFactory.js I noticed that it assumes all components will be default exports.

The only options I can see to fix this are:

  • Update the script so it can add named exports
  • Disable the automatic generation of the file an manually add each component

Is there anything else I'm missing here? Thanks in advance.


The component factory generation is a convenience within the JSS samples, which enables registration of components by convention, instead of manually maintaining a component factory. The out of the box convention in JSS React is /src/components/ComponentName/index.js, with a default export. As noted in comments, you can change that convention if you like.

Note that only components which you wish to be used with Sitecore renderings in placeholders need to be registered in the component factory. (Typically 'molecules' in atomic design.) I would assume that your Icons are meant to be used within other components, so likely do not need to be in the factory. A simple solution would be to keep such 'atoms' in a separate path (not /src/components).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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