Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session

Model manager is unable to render the aem content from .model.json response after creating a react build in AEM Remote SPA application

Avatar

Level 1

Model manager is unable to render the aem content from .model.json response after creating a react build in AEM Remote SPA application

 

Hi,
We are trying to deploy AEM Remote React SPA which is using the Modal Manager asynchronously. Below is the code for initializing the modal manager:
import { createRoot } from 'react-dom/client';
import React from 'react';
import App from './App';
const { REACT_APP_PUBLIC_URI } = process.env;
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 />);


When trying to run locally, Modal manager is getting initialized successfully, also fetches the data from AEM and renders the AEM editable content "Hello World!" as expected (refer attachedscreenshot):

But when the react app is deployed, Modal manager gets initialized, fetches the data from AEM but does not render the AEM editable content "Hello World!"(refer attached screenshot of deployed react app):

We also tried executing react build locally with "serve -s build", and observed the same issue while running the local build. Any help on this is greatly appreciated.

2 Replies

Avatar

Community Advisor

I suspect this is just a cache issue due to the response of the .model.json is actually giving you the "text" information. Can you please try to flush the cache if you are testing over a dispatcher, or try to hit directly a publisher?. Also please make sure you try on incognito window.



Esteban Bustamante

Avatar

Level 1

Hi ,

 

This issue is happening when we try with author url and also in localhost:3000 as well. Main issue is when we run the react app in localhost it is working but when we try to build and deploy the build the aem components are not rendering not sure what is going wrong in the build process.