Modal Manager does not render editable content retrieved from AEM after react app is built

[Jinks1996]

Describe the bug Modal manager is able fetch editable in AEM Author environment but unable to render that content on react app when react app which is build (npm run built) and served locally from that built (serve -s build).

Package version "@adobe/aem-headless-client-js": "^3.1.0", "@adobe/aem-react-editable-components": "2.0.5", "@adobe/aem-spa-component-mapping": "1.1.1", "@adobe/aem-spa-page-model-manager": "1.5.0", "@babel/plugin-proposal-optional-chaining": "^7.18.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.4", "react-scripts": "5.0.1",

To Reproduce Steps to reproduce the behavior:

1. Setup the WKND SPA from the tutorial
2. Delete the setupProxy.js file (removing the proxy)
3. Create Author and Publish environment for WKND SPA
4. configure Modal manager to make calls directly to AEM `// index.js import ReactDOM from 'react-dom/client'; import React from 'react'; import App from './App'; import { ModelClient, ModelManager } from "@adobe/aem-spa-page-model-manager";

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

ModelManager.initializeAsync({ modelClient: new ModelClient('https://publish-p47369-e228224.adobeaemcloud.com'), path: '/content/wknd-app/us/en/home.model.json' });

root.render(

);` 5. run react app locally to see the editable content ("Hello World!") getting rendered 6. built the react app - npm run build 7. run the build locally - serve -s build (Editable content is not being rendered when react app is built) Console Error: Uncaught (in promise) TypeError: "l" is read-only at e.exports (readOnlyError.js:2:9) at aem-react-editable-components.js:1:8433 at new Promise () at aem-react-editable-components.js:1:8171 at t (aem-react-editable-components.js:1:8629) at aem-react-editable-components.js:1:8754 at ou (react-dom.production.min.js:244:332) at Sc (react-dom.production.min.js:286:111) at react-dom.production.min.js:282:391 at _ (scheduler.production.min.js:13:203) **Expected behavior** Editable Content should be rendered even if the react app is build and served locally **Screenshots** React App served from built: React App running locally (npm start) able to render "Hello World!" content: **Git Repository** - https://github.com/Jinks1996/AEM-Remote-SPA

[friendlymahi]

@Jinks1996 - Even I encountered this issue. Looks like the issue started since v2.0.5 of this module/repo. Since you are in early stage of exploring the feature, use v2.0.4 and confirm if it works. However if you intend to use the latest version, you may need to use a development build instead of a production build for hosting externally on a NodeJS server as a temporary solution until we have a fix ( not saying its a bug in adobe's code, but probably we may have to make some other config changes on consuming app, and does require some analysis)

@sharanyavinod - Hope you're doing well. Even with new version 2.1.0 I faced this issue when doing production build and I am not seeing this behavior every where. For e.g. on the wknd spa guides, it works fine for me. But i have a custom app in use for a pretty while, and after switching to v2.0.5 or v2.1.0 the built code using production mode when deployed to AEM for SPA editing, I face the same issue explained here. Can you please throw some insights on this?

[Jinks1996]

@friendlymahi After degrading version of "@adobe/aem-react-editable-components" from "2.0.5" to "2.0.4", I am able to create a stable build for my react application and now the AEM editable contents fetched from modal manager are getting rendered as expected.

Closing this issue for now, though fix needs to be deployed for version "2.0.5" (latest version).

Thanks a lot @friendlymahi :)

[friendlymahi]

@Jinks1996 - After spending enough time and comparing the regular WKND SPA with our custom SPA, it looks like its a combination of changes done as part of 2.0.5 (mostly related to async calls for Remote SPA I guess) and the browserslist config element in package.json. I have seen your git repo as well and both of ours match since we used Create React App (CRA) freshly, and this entry is different between the WKND SPA which was probably created years back and it uses just the value defaults and is not specific to any env (i.e. development or production). But in the latest version of CRA, it has diff values between prod and dev, causing the behavior to be inconsistent. I have no clue if there is a potential fix from this repo, but we can atleast update documentation for SPA 2.0 stating that this change needs to be done if they encounter this error. Please retry on your end making the change mentioned below and confirm if it works fine with v2.1.0 of the package.

  "browserslist": [
    "defaults"
  ],

instead of

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

@sharanyavinod - Requesting your inputs on this matter. Its not just an issue for Remote SPA but regular SPA as well and changes done in dialog are no longer reflecting if the browserlist is not updated. Please take this up in your team and advise on this. Thank you !