AEM Remote SPA Model manager is not rendering content after deploying in aws s3 | Community
Skip to main content
S
shivakrishna36
September 8, 2023
Solved

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

  • September 8, 2023
  • 4 replies
  • 1473 views

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 />);

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by A_H_M_Imrul

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

 

 

        

4 replies

A_H_M_Imrul
Community Advisor
A_H_M_ImrulCommunity Advisor
Community Advisor
September 8, 2023

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   

 

    S
    shivakrishna36Author
    September 8, 2023

    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
      Community Advisor
      A_H_M_ImrulCommunity AdvisorAccepted solution
      Community Advisor
      September 8, 2023

      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
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        September 12, 2023

        @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. 

        Kautuk Sahni
        mahi1729
        mahi1729
        Level 4
        September 15, 2023

        @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
          mahi1729
          Level 4
          September 28, 2023

          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" ] },
            Terms & ConditionsAccessibility statement

            Loading footer...