Parsys is not appearing in experience fragment in SPA Editor React project

[Mario248]

I am trying to create an experience fragment for SPA by extending "cq/experience-fragments/components/xfpage". I just followed the instructions on the WKND site. I could see XF related features on the left side but I don't see any placeholder (parsys) to add a component. I double checked the index.js and entrypoint of the SPA which is provided by the AEM SPA Editor JS SD and.  Both Sightely and SPA entry has the root element "spa-root". But still the responsive grid is not appearing on the XF page. Note I have the same setup for a regular page where I could see the parsys. I have a problem only in XF pages.

Is there any additional config I should make?

Body.html

<div id="spa-root" data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}"></div>
<sly data-sly-include="footerlibs.html"/>

ui.frontend/src/index.js

document.addEventListener('DOMContentLoaded', () => {
  ModelManager.initialize().then((pageModel) => {
    const history = createBrowserHistory()
    render(
      <Router history={history}>
        <App
          history={history}
          cqChildren={pageModel[Constants.CHILDREN_PROP]}
          cqItems={pageModel[Constants.ITEMS_PROP]}
          cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
          cqPath={pageModel[Constants.PATH_PROP]}
          locationPathname={window.location.pathname}
        />
      </Router>,
      document.getElementById('spa-root')
    )
  })
})

[Mahedi_Sabuj]

Hi @Mario248,

For the SPA Editor React project, you need to create experience fragment by extending "spa-project-core/components/xf-page".

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
  xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
  jcr:primaryType="cq:Component"
  jcr:title="Experience Fragment"
  sling:resourceSuperType="spa-project-core/components/xf-page"
  componentGroup=".hidden"/>

https://github.com/adobe/aem-project-archetype/blob/e99017e1abe8bfbf0c9f996d413958f170da9c71/src/mai...

[Mario248]

It is not working even by extending "spa-project-core/components/xf-page". FYI, this component is not having anything. 

[kautuk_sahni]

@Mario248 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[Mario248]

Sorry, the issue is not resolved yet.

[arunpatidar]

HI @Mario248 

Please check the component policy to allow component.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/add-policy-to-the-custom-c... 

[Mario248]

I think the issue is not about policy but I crossed checked the component and layout policy. The problem is with loading responsive grid component as part of page component itself. 

[arunpatidar]

You need to extend the responsivegrid, maybe the json  response is not available in editor for custom system. 

https://github.com/arunpatidar02/aemaacs-spa-aemlab/pull/2/commits/16678e231d1a69815e9e8c387e3fad400...