Upgrading AEM - React SPA project to React 18

Question

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 · Answer

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 !

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded