How to integrate a separate React repo with an AEM repo | Community
Skip to main content
Saumya
Saumya
Level 2
August 19, 2024
Solved

How to integrate a separate React repo with an AEM repo

  • August 19, 2024
  • 1 reply
  • 1269 views

Hello,

 

To simplify, let's use these keywords:

- AEM Repo (Repo A)
- Frontend Repo (Repo B)
- React Repo (Repo C)

 

I currently have an AEM repository (Repo A) that's already integrated with a Frontend repository (Repo B) using the aem-clientlib-generator. Now, I want to integrate a third repository, which is a React repository (Repo C), with the AEM repo. I've added the `clientlib.config.js` file and updated the `package.json`. During the `npm run build` process, a new clientlib is successfully generated in the AEM repo, containing the minified JS and CSS files from the React repo.

Now, I need to create an AEM component and map it to a component from the React repo. Can anyone help me with this?

Most of the resources I've found online only explain how to map an AEM component to a React component residing in the `ui.frontend` folder of the AEM repo, but that's not my case.

Additionally, when I try to include the newly generated clientlibs in any component, I encounter the following error while loading the page where the component is placed:

**Uncaught Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.**

Any guidance would be appreciated!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MukeshYadav_

Hi @saumya ,

Cross check the id your are targeting in react which should be available before js execution.

You may have a look https://stackoverflow.com/questions/26416334/react-error-target-container-is-not-a-dom-element

Or may put extra check in react js if div is present (i.e. not null and undefined) then only render the component.

Thanks,

1 reply

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity Advisor
Community Advisor
August 19, 2024

@saumya it depends on how are trying to use those react components, are you trying to build a SPA website? then mapping AEM components resourcetype to React SPA component. But its not mandatory, you can also just load those clientlibs on the page and hyderate React tags for each components on the page onload.

    Saumya
    SaumyaAuthor
    Level 2
    August 20, 2024

    @shashi_mulugu , No it is not SPA. I am trying to load clientlibs on the page but it is throwing this error : 

     

    **Uncaught Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.**

      Saumya
      SaumyaAuthor
      Level 2
      August 20, 2024

      Hi @saumya ,

      Cross check the id your are targeting in react which should be available before js execution.

      You may have a look https://stackoverflow.com/questions/26416334/react-error-target-container-is-not-a-dom-element

      Or may put extra check in react js if div is present (i.e. not null and undefined) then only render the component.

      Thanks,


      Hi @mukeshyadav_ , Thanks for your input! I checked and noticed that my clientlibs were loading before the root element. After updating it, I can now see the React components successfully loading on my AEM page.

       

        Terms & ConditionsAccessibility statement

        Loading footer...