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

[bug] Model-Manager throws errors when using Nuxt.js (with vue-router) #61

Open anoack93 opened 3 years ago

anoack93 commented 3 years ago

Describe the bug Currently, we at diva-e working on a support of the Nuxt.js framework for AEM based on the Vue implementation provided by Mavice. So we replaced the regular react application in the Weekend-SPA-Example with a similar nuxt setup. The difference here is, that nuxt bootstraps the Vue application internally so we cannot intervent much in this lifecycle.

When importing the aem-spa-page-model-manager package in our nuxt application we get the following error in the browser console:

aem-spa-page-model-manager.js?64bf:1 Uncaught (in promise) Error: ModelClient is undefined. Call initialize first!

This happens as soon as we import anything from your package, even when we are just importing Constants and do nothing else with the modules.

At first this error caused our website to remain blank and no rendering was executed. But by adding some error handling, we were able to avoid this problem and the site was displayed correctly. In our view this error is strongly related with Issue #60, our current workaround is to disable model routing completly:

meta: [
  { property: 'cq:pagemodel_router', content: 'disabled' }
]

I think in the AEM SPA preview, this property is already set, so this issue only applies for the live page.

Technical Details

The react and vue wknd samples work like this:

  1. Package-Import
  2. Execution of ModelManager.initialize()
  3. Vue/React-Router init

In Nuxt this sequence is a bit different

  1. Package-Import
  2. Vue/React-Router init
  3. Execution of ModelManager.initialize()

Package version

To Reproduce

It should be possible to reproduce this error by using either the react-wknd-spa or vue-wknd-spa (mavice) sample project and create the respective router of the framework before executing ModelManager.initialize

When calling initialize before creating the vue-router, this problem is not present.

Expected behavior

Package import and ModelManager-Init should be independet of the vue router init time. This seems to be a problem caused by #60

Screenshots

Bildschirmfoto von 2021-05-14 10-14-39

pfauchere commented 3 years ago

Hi, @anoack93 great to see Mavice implement support for Vue.js. You rock! I am wondering if using ModelManager.initializeAsync() [0] could help until #60 is resolved? Anyway, the latter function may become the way to go when initializing the library.

[0] https://github.com/adobe/aem-spa-page-model-manager/blob/master/src/ModelManager.ts#L190

cc @sharanyavinod

anoack93 commented 3 years ago

I think it does not make a difference to use ModelManager.initializeAsync() because initalize is also based on this function. Currently we are just disabling the pagemodel-router I think that is okay for now.