search

adobe / aem-spa-page-model-manager

Interface between Adobe Experience Manager and Single Page Application framework.
Apache License 2.0
35 stars 25 forks source link

Unable to use HTML5 history push when using Model Manager without using React Router for navigation/routing #43

Closed friendlymahi closed 3 years ago

friendlymahi commented 3 years ago

Background In our application we already have custom routing implementation for soft loading content from AEM. Now we are integrating SPA editor. We also use Redux in our application. Our past experiences state that Redux and React Router are not the best combination for usecases. And our implementation is used across many websites within our organization. So usage of React Router may not be viable in near future.

Issue Description With in our custom routing implementation we already use HTML5 API for updating URLs. Now, if we don't use React Router and invoke ModelManager to initialize the root model or just the current page, using a custom model client that extends ModelClient class as we have different endpoints with additional parameters, for the first time AEM editor loads perfectly fine. Now we have a button where the action upon click is to invoke HTML5 API to navigate to a different page. We have written a custom binding that shall insert new page path into model store followed by getData to retrieve model for new page. Now in this process some how the custom model client becomes null the following error appears and doesn't load the new page content even though custom model client already retrieved the data.

VM590401 aem-spa-page-model-manager.js:1 Uncaught (in promise) Error: ModelClient is undefined. Call initialize first! at Object.get modelClient [as modelClient] (VM590401 aem-spa-page-model-manager.js:1) at Object._checkDependencies (VM590401 aem-spa-page-model-manager.js:1) at eval (VM590401 aem-spa-page-model-manager.js:1)

Package version "@adobe/aem-react-editable-components": "^1.0.0", "@adobe/aem-spa-component-mapping": "^1.0.0", "@adobe/aem-spa-page-model-manager": "^1.0.0",

To Reproduce Steps to reproduce the behavior:

  1. Override HTML5 API to invoke ModelManager getData or initialize method to retrieve model json for new page
  2. Load SPA editor app without integrating React Router
  3. Now using browser console try changing the content iframe URL to a new page
  4. See error

Expected behavior ModelManager API should allow more control towards switching the page being viewed without throwing any errors

Screenshots Error description should enough. if desired will attach screenshots when some one requests for.

Additional context After repeated trials and info from https://stackoverflow.com/questions/60331739/render-aem-pages-in-react-dynamically-independently-of-url-path# decided to re-initialize (instead of get data) the model manager every time we have a new page with new instance of custom client it works fine.

blackbyte-pl commented 3 years ago

Hi @friendlymahi Thank you for your report! As you can imagine, introducing two separate history managers might lead to some serious issues or unexpected glitches. As for now, Page Model Manager is tightly coupled with React Router, but based on your feedback the note has been taken to make it more flexible in the future.

I'm glad that you have found a workaround for your problem. As for now, we cannot support you any further, we will take this under consideration for future plans working on page model manager.

friendlymahi commented 3 years ago

@blackbyte-pl thank you so much for your response and explaining the reasoning. I have one question. Spa model manager is react or angular agnostic. Am I right? If so let's say I create a separate browser history object without using react router is there a possibility for making this work? Even though the workaround works I have a constant reminder on my browser console that model client is not initialized even though it was and was able to obtain the model Json on every call after htmlt5 history push. Not sure if my questions see very vague or overwhelming, if so please pardon me. Thanks

pollenshukla commented 3 years ago

In case if anyone is still facing the issue -

ERROR Error: Uncaught (in promise): Error: ModelClient is undefined. Call initialize first! Error: ModelClient is undefined. Call initialize first! at Object.get modelClient [as modelClient] (cq-spa-page-model-manager.js:1)

Update the node dependencies to: "@adobe/aem-spa-component-mapping": "^1.1.1", "@adobe/aem-spa-page-model-manager": "^1.3.11",

ChazUK commented 2 years ago

I am using 

"@adobe/aem-angular-editable-components": "^1.4.0",
"@adobe/aem-spa-component-mapping": "^1.1.1",
"@adobe/aem-spa-page-model-manager": "^1.4.0",

and still getting the ModelClient is undefined error

vsdmoraes commented 2 years ago

Same here, any updates?