jQuery/bootstrap in a micro-frontend application

[leonardopuleggi]

Hi,
we have a micro front end application implemented via different framework, Ember, React etc.

Some of these rely on jQuery and bootstrap and each micro app loads the specific jQuery/bootstrap JS combination

All good, until we need to unload one micro frontend and loads another one for a different URL

Sometimes the bootstrap dropdowns event are not working and it'd be for some old "now" broken event handler

Below there is a super minimal replication. If you click a couple of times on the reload script button the dropdown is not working anymore

On the reload function we have tried to clean up all the old events from jQuery and the Boostrap ones but the dropdowns still isn't working after 2-3 reloads

Any idea pls? Sandbox with the same code: https://codesandbox.io/s/festive-volhard-hbjm8?fontsize=14&hidenavigation=1&theme=dark

[coliff]

At a quick glance it looks like you're not loading PopperJS which is required for dropdowns, and you're loading old versions of Bootstrap too. Update to the latest, minified versions - and include popper by using bootstrap.bundle.min.js and try that:
https://getbootstrap.com/docs/4.6/getting-started/introduction/#starter-template

[leonardopuleggi]

The dropdown do work at first. The problem happens when we need to remove the scripts for jquery and bootstrap (different micro frontend might have different version, not use jquery or bootstrap at all)

When the new micro frontend reloads jquery and bootstrap, the dropdown fails to open as there is most likely a spurious click handler