How to integrate a separate React repo with an AEM repo

[SaumyaJa]

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!

[Shashi_Mulugu]

@SaumyaJa 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.

[SaumyaJa]

@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.**

[MukeshYadav_ · Accepted solution]

Hi @SaumyaJa ,

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,

[SaumyaJa]

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.