Upgrading AEM - React SPA project to React 18

[akashkriz005]

Hi Everyone, 

There is a scenario that we are undergoing currently to upgrade an AEM - React SPA project to React 18 and with all latest versions of dependent libraries. We are using Archetype 47 , which by default gives react 16 and this we are upgrading to 18.

And also in the package.json the editable components and other dependencies version also got upgraded to latest versions available as mentioned below. 

Currently we are trying to make the core components such as Tabs , List etc to be adaptable to React 18. In that we are facing different sort of issues for the React end. Is it recommended to perform such an approach ? 

And also the dependencies updated above , will they support react 18 to be supportive to Core AEM components ? 

Please suggest a valid comment for this scenario. 

@kautuk_sahni 

[mahi1729]

Hello

I personally suggest you to go further and do a POC on this. Reason is, there are no real tight dependencies for using the specific version of React after v16, since there is heavy usage of hooks and functional components usage thats implemented along with SPA 2.0. Here is another branch which contains most of the recent tutorials for SPA implementation,

https://github.com/adobe/aem-guides-wknd-graphql/blob/feature/spa-editor-v2/react-app/package.json

If you see those tutorials (react or next js or others) are all based of React v18 (or may be some and not all), and thats good enough for you proceed with the idea of using v18 since Adobe provides these components for reference, and using your frontend configurations e.g. package.json or webpack config, force the react version to be 18 across the app to avoid multiple versions.

I am sure this shouldn't be an issue for you. Feel free to post any issues you may come across.

Thanks !

[akashkriz005]

Thank you so much for the information @mahi1729  !

Just one more query , Since we are upgrading the versions in React , from AEM end will there be an chance for compatibility issues for Java files or any other libraries we are using for core components given by Adobe ? 

[mahi1729]

Understand that there is no thick communication between the front end app and aem. Pure rest api and potentially graphql api interaction. So the version of core components and version of Java absolutely are in no relation with front end react version bring upgraded to.