CODEWITHSUNDEEP
javascriptreactjsmicro-frontendreact-scriptssingle-spa
Shreya Shah
Shreya Shah

Reputation: 592

Single-Spa: Uncaught Error: application 'app1' died in status UNMOUNTING: unmountComponentAtNode(...): Target container is not a DOM element

I have registered 4 react applications using registerApplication of Single Spa. When I am navigating from one app to another I am seeing an error in console as well as an overlay on the browser.

Uncaught Error: application 'app1' died in status UNMOUNTING: unmountComponentAtNode(...): Target container is not a DOM element.

This is how my index.js looks like from the registered micro-app:

function domElementGetter() {
  return document.getElementById('app1-placeholder');
}

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  domElementGetter,
  errorBoundary() {
    return <div>This renders when a catastrophic error occurs</div>;
  },
});

export const { bootstrap } = reactLifecycles;
export const { mount } = reactLifecycles;
export const { unmount } = reactLifecycles;

I am registering my application in single-spa-config file using SystemJS for import as below:

registerApplication('app1', SystemJS.import('app1'), pathPrefix('app1'));

function pathPrefix(prefix) {
  return (location) => location.href.indexOf(`${location.origin}/${prefix}`) !== -1;
}

I don't know where to debug about this problem.

Upvotes: 3

Views: 2419

Answers (0)

Related Questions