WKND React SPA Sample does not work with aem-react-editable-components 2.0.0

[macman2013]

Expected Behaviour

The WKND React Sample Project should work when upgrading the aem-react-editable-components to 2.0.0, since there are no notes or documentation that says otherwise. Following the very limited "migration to v2" readmes in the package repository (found here and here) were helpful, but unsuccessful in getting the code to run.

Actual Behaviour

A white screen appears when trying to use the sample project and the attached error appears in the console.

It appears the class component implementation for the Page component was removed in version 2.0.0 and with the existing App component extending the Page component, there is no documentation or guide as to how to migrate that to version 2.0.0 syntax.

Reproduce Scenario (including but not limited to)

Update the aem-react-editable-components package to 2.0.0 in the package.json file. This version is needed to support React 17 (as noted in this issue) and includes better support for functional components.

Steps to Reproduce

1. Download and unzip the latest 1.0.3 React Sample version here.
2. Update line 13 of the ui.frontend/package.json to version 2.0.0.
3. Run npm start
4. The project will run and show the above screenshot.

Platform and Version

macOS 12, node 16.16.0 LTS, AEM 6.5 with latest service packs

Sample Code that illustrates the problem

Logs taken while reproducing problem

Can the React Sample Code be updated to support the new dependency or more complete documentation be provided to migrate the existing sample code to the new syntax?

[davidjgonzalez]

@macman2013 You can take a look at the app in: https://github.com/adobe/aem-guides-wknd-spa/tree/React/2.0.0

This has been updated to use v2 of the aem-react-editable-components, few quick notes on it:

1. Use Node.js v14.x (use nvm to managed your node version if necessary)
2. The samples AEM package from React 1.0.3 will work, but youll want to perform your own maven install from the React/2.0.0 branch.

For AEM SDK
$ mvn clean install -PautoInstallPackage -Pcloudservice

For AEM 6.5.x
$ mvn clean install -PautoInstallPackage -Pclassic

Im working on getting releases cut, docs/tutorials updated - but wanted to get this out to you as i work on those, as this should hopefully unblock you a bit. The main things to checkout are:

1. App.js and the use of EditableComponent/Page pairing, and removal of with wrapper
2. Page.js - use of v2 Page, and removal of with wrapper
3. The various components; specifically at the bottom the "regular" React components are wrapped with EditableComponent and exported

I also switched the components over to functional React components, since class-based have gone out of vogue.

Anyhow - LMK if you have questions/run into problems - and ill help you out and it should help inform some of the docs around this as well!

[davidjgonzalez]

@macman2013 Did some more digging, and we'll have to push off updating the SPA Tutorial to use v2 for a couple reasons:

1. The AEM Project Archetype still generates everything for v1
2. The v2 module isnt compat with the aem-react-core-components-base/spa

In the meantime, i wrote this up to help you understand what you need to do to use v2 in SPA Editor.

• https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/how-to/react-core-components-v2.html?lang=en

LMK if you run into anything and I'll help where i can!

[iamdavidjackson]

Hey MacMan, I ran into similar issues and I am wondering if part of your problem is the change to the component props structure in v2.0.

In the example code that @davidjgonzalez shared you can see that the component is wrapped in the EditableComponent.

https://github.com/adobe/aem-guides-wknd-spa/blob/React/2.0.0/ui.frontend/src/components/Text/Text.js#L37-L65

That EditableComponent expects the props that were previously passed directly to the component to be on the model prop instead. It adds the model to state and then keeps it up to date in the useEffect hook. You can see it then passes the model to the component down on line 80.

https://github.com/adobe/aem-react-editable-components/blob/8d06907e94d8f6a33e47e4dbda6111170c0d2d71/src/core/EditableComponent.tsx#L40-L89

I think you'd need to wrap all your components in EditableComponent to get them to show up out of the box otherwise you'd need to update them to find their props under model instead but then I think you're going to lose some aspects of the authoring experience.

[macman2013]

Thank you all. I will report back with any issues or resolutions in the next few days.

[deepakavs]

Following up for macman, @davidjgonzalez I have exactly followed your tutorial and write up from this link. The text component is showing up. However, the Edit chrome/ Blue hover is missing and I cannot edit the component. Looks like the Spa editor is not able to recognize the component for authoring. I have attached the code for reference.
text-component.zip

Packages used-
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@adobe/aem-react-editable-components": "^2.0.3",
"@adobe/aem-spa-component-mapping": "^1.1.1",
"@adobe/aem-spa-page-model-manager": "^1.5.0"

[davidjgonzalez]

@deepakavs well try to look this tomorrow and provide some info to you. Would it be possible for you to create a content package of the page you load in the Page Editor that youre trying to edit the text component on?

[davidjgonzalez]

Hi @deepakavs - your code works for me. I had to make a few alignments with resourcetypes, but otherwise the Text component is editable in SPA Page Editor. Here's a video showing it working:

aem-guides-wknd-spa_issue-33.mp4

One thing i forgot to show (but you can see in the attache project source) is i updated the package.json to have the 5 dependencies you listed above (and removed the React v1 deps that were auto-added).

• AEM project source code: aem-guides-wknd-spa_issue-33.zip
• Installable "All" package: mysite.all-1.0.0-SNAPSHOT.zip

So - it seems like something else might be going on with either your project or AEM -- you might have to work through support to figure out what's going on - but as far as i can tell, the linked content on ExL is correct, as is your code. You could try removing the import-component.js and manually importing what you need to see if something in that is confusing SPA Editor, and also double check your resource type mappings against whats actually on your content in AEM.

[deepakavs]

Hi @davidjgonzalez , Thanks for attaching the packages I will compare the differences. By the way, I don't see the header component in your page although it is in the template. Is it because the package @aem-react-editable-components doesn't have a react implementation of OOTB Experience Fragment (XF) component? If that is the case could you let us know when can we expect the XF component in the @aem-react-editable-components package?

[davidjgonzalez]

Correct - its not showing up because i have no React component included in my React app that maps to that resource type (i only imported that Text React content component -- that's what i swapped out for the import-component.js.

If the component you need isnt in the v2 AEM React Editable Components package, youll likely have to write it yourself. The product vision for React components v2 was to get away from trying to provide components, but rather provide the tools to create components (w/ the exception of a few low-level structural components they decided they should implement) -- But, Adobe support could confirm directly with the product team for you.

[deepakavs]

@davidjgonzalez Despite the working text component I see some weird behavior of the spa-page-template when I installed your package on AEM 6.5.14 vanilla instance. The Layout container shows no allowed components on the bunch of components you allowed. Please check the attached images and let me know your comments.

[davidjgonzalez]

@deepakavs this sounds like a product issue. Can you please raise with Adobe customer care and see if they have ideas?

[SatoshiInoue]

Hey @deepakavs I had the same issue as yours locally with the AEM as a Cloud Service SDK. I was told by the product engineer that this is a minor bug in the react editable component library: https://github.com/adobe/aem-react-editable-components/blob/master/src/components/AllowedComponentsContainer.tsx#L41
For now, it's hacky, but you can overwrite the node_module file (node_modules/@adobe/aem-react-editable-components/dist/aem-react-editable-components.js). I made a change like the below:

"data-emptytext":r,
changed this to↓
"data-emptytext":e.title? e.title:r,

Directly modifying a library isn't a good practice, of course, so hopefully a new version to fix this will come out soon.