[REACT] Best way to deal with Bryntum mounting to the global (window) scope

[jasonlunsford]

Hey Team,

Good morning. We have an unusual issue bubbling up from our architecture. Hoping you can help.

We use micro front ends to compose our application. Each of our Bryntum products (Gantt and Kanban) are bundled in their own MFE. The MFEs are activated when the user clicks on a UX control (similar to a button). When the MFE mounts the Bryntum product instantiates and mounts a bryntum object to the global (window) scope. This is fine the FIRST time. However, when the user clicks to mount the OTHER Bryntum MFE, we see a nasty error in the console:

Screen Shot 2024-02-26 at 08.24.52.png (383.4 KiB) Viewed 150 times

We believe this is because the second Bryntum MFE is attempting to mount a duplicate copy of the bryntum object into the global scope. Our work around is to do this each time that button control is invoked:

  if (window['bryntum']) {
    delete window['bryntum'];
  }

We execute this code BEFORE the next Bryntum MFE mounts. This works, but obviously it is a hack.

Is there a way to optimize our application to use two (or more) Bryntum products at the same time? Perhaps by configuring the Bryntum apps to check for a bryntum object on the window scope BEFORE trying to mount a duplicate instance?

Thank you for the help!

[marcio]

Hey jasonlunsford,

Thanks for reaching out.

Just to confirm, are you using thin modules to load separated products? https://bryntum.com/products/gantt/docs/guide/Grid/gettingstarted/multiple-products

[jasonlunsford]

Hi Marcio,

Yes we are using thin modules. And the weird part is that the Kanban MFE is the one that throws the errors. And of course Kanban does not extend the Grid class so not sure why. We think it is definitely the Bryntum object mounting into the global scope. If I click back and forth between the MFEs I start seeing this error when the Bryntum (Kanban) MFE monts:

Screen Shot 2024-02-26 at 08.59.24.png (106.2 KiB) Viewed 144 times

[jasonlunsford]

Actually, quick follow up. The errors are thrown by either MFE (Gantt or Kanban), depending on the order they are first invoked in.

[saki]

Does the above error originate in a Bryntum component? Is it still "...bundle was loaded multiple times..."? If so, is it feasible to provide us a showcase?

[jasonlunsford]

Hey Saki,

No I can't provide source code via a public forum, but I'm happy to provide any samples necessary. Yes, we see that "...bundle was loaded multiple times..." error. It happens when we DON'T explicitly remove bryntum from the window scope. Is there a way to configure the Bryntum apps to detect if Bryntum has already been mounted in the window scope?

[kronaemmanuel]

Hey Jason,

You can share example code to support@bryntum.com.

Regards,
Krona