AEM Remote SPA Model manager is not rendering content after deploying in aws s3

[shivakrishna36]

When AEM Remote SPA is locally developed everything is working fine. But, when we build the react SPA and run with command (serve -s build) Model manager is not able to render data.

code:

import { ModelClient, ModelManager } from "@adobe/aem-spa-page-model-manager";

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

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

[A_H_M_Imrul]

Hello @shivakrishna36,

The content path should be accessible through internet to serve the business here. Make sure you can access it as API first.

Thanks   

[shivakrishna36]

Hi @A_H_M_Imrul ,

I'm able to get the response from .model.json api from AEM. But, content is not rendering by model manager.

Below is the error i'm seeing in console. 

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 (<anonymous>)
    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)

[A_H_M_Imrul · Accepted solution]

Hello @shivakrishna36,

Based on your explanation it looks like It can be related to some library that your JS code is dependent on. Also since you are trying to run the react front-end application on AWS S3, please make sure to build your application (production ready) in advance and put the executable (static) part on s3, as s3 can only run static websites (no server support).

For reference: https://create-react-app.dev/docs/production-build/

Thanks

[kautuk_sahni]

@shivakrishna36 Do you find the suggestions useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. 

[mahi1729]

@shivakrishna36  - Even I encountered this issue and struggling to find root cause. But if you are in earlier stage of development or POC, please use @adobe/aem-react-editable-components v2.0.4 instead of any other latest version. But if you intend to use the latest version, you can perform steps below as a temporary workaround until we find root cause or Adobe suggests a fix.

1. Eject your create react app if you are using CRA

2. update build.js file in scripts folder and update it to read the build mode i.e. development or production from the build command. And then update the build script to use development as NodeEnv e.g. npm run build should trigger node scripts/build.js development instead of just node scripts/build.js

3. now host the app on target AWS or any where

In other words, just for validating your Remote SPA, either build using old version of Editable Components or generate development build for your SPA and host it on target env.

Hope this info helps

Thank you !

[mahi1729]

Hi @shivakrishna36 - Were you able to confirm which solution worked for you. After spending days I found the root cause. Its the browserlist config in package.json thats causing the issue. Please see link below for the details.

https://github.com/adobe/aem-react-editable-components/issues/206#issuecomment-1739721059

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"
    ]
  },