How to use a component from one component group in another component group using React frontend module

[THX-1138]

Hi guys, I have a project with more than 10 frontend modules, each one having its own component group. Some of them are using the default AEM React module, while others are using a headless Next.js frontend.

The problem is that I need to create one component in a different component group that can be used across all the other component groups.

I tried creating the generic component frontend module with the default AEM React module and added it to the "Generic Components Group." I then included its component group inside the "first-project-components" group in the policies file, as shown in the code below:

<wcm jcr:primaryType="nt:unstructured">
        <foundation jcr:primaryType="nt:unstructured">
            <components jcr:primaryType="nt:unstructured">
                <responsivegrid jcr:primaryType="nt:unstructured">
                    <first-project-components
                        jcr:description="Includes only SPA-Enabled components."
                        jcr:primaryType="nt:unstructured"
                        jcr:title="First Project Components"
                        sling:resourceType="wcm/core/components/policy/policy"
                        components="[group:First Project Components,group:Generic Components Group]">
                        <jcr:content jcr:primaryType="nt:unstructured"/>
                    </first-project-components>
                    <generic-components
                        jcr:description="Includes only SPA-Enabled components."
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Generic Components Group"
                        sling:resourceType="wcm/core/components/policy/policy"
                        components="[group:Generic Components Group]">
                        <jcr:content jcr:primaryType="nt:unstructured"/>
                    </generic-components>
                </responsivegrid>
            </components>
        </foundation>
    </wcm>

So, this enables the generic component to be seen by a page that is configured to use the First Project Components. However, when I tried to drag and drop the component onto the page, it just wouldn’t work. The component appears inside the page content in the JCR, but it doesn’t render anything on the page.

I would like to know the correct way to use a React component in another React frontend module.

If more information is needed, I can post it here.
Thanks in advance!

[avesh_narang]

It appears that you are including unsuitable frontend libraries in the component.

As you pointed out, certain components are utilizing the standard AEM React module, while others are employing a headless Next.js frontend.

Please verify that the appropriate libraries are activated from the default component.

I am not entirely certain about this particular scenario, but we have successfully managed a similar case by distinguishing the component based on the site name (as we hvae difffernt sub sites) where it is utilized.

[THX-1138]

But the problem is that the component won't work on React component groups as well.

Could you elaborate more on how you managed to share the component among the others component groups please?