Sub App only works first time

[Reiss-Cashmore]

Describe the bug

When importing a SubApp it only works the first time it loads. If I navigate away from the SubApp page and come back then it no longer mounts / displays.

Here is a repo to demo the behaviour: https://github.com/Reiss-Cashmore/nuxt-single-spa-bug

Screenshots

Bug.mp4

To Reproduce

Steps to reproduce the behavior:

1. Build app as UMD and use import()
2. Click on NuxtLink to navigate to SubApp
3. Click on NuxtLink to navigate to Home
4. Click on NuxtLink to navigate to SubApp
5. SubApp is not shown

I've noticed that the SubApp unmount() and beforeUnmount() in MFE.js do not get called for some reason??

environment information

• OS: Mac OSX 10.14.6
• Env: Node 14.6
• Browser: Chrome

[Reiss-Cashmore]

After investigation:

renderNuxt function in client.js only gets called on first render. If you unmount/unload/unregister the application and then attempt to register / remount the app without a full page reload then renderNuxt() does not get called.

In the mfe.js a workaround is to adapt it to the following so you are manually calling the render function except on the first page load:

var initialMount = true
export function mount(render, props) {
  if(!initialMount){
    render()
  }
  initialMount = false
  addProps(props) // Prevents components from not receiving props.
}

Note: You must use the singleSpa unregisterApplication on your application when you change routes or want to "unmount" the app, and then reregister it again with registerApplication when you return back to the page for this to work

[levy9527]

well, thanks for your feedback. our members might reply in their spare time.

[eulier1]

Is HMR works for you when edit a file into a subapp?