Trying to use Bootstrap Modal in custom js

[HichemBenali]

Describe the bug When using bootstrap modals from custom js it breaks all the dropdowns.

To Reproduce Steps to reproduce the behavior:

1. Add a Layout::view with a custom modal
2. Add a custom.js to use that modal
3. Try to use any dropdown that exists in the platform. IE: profile dropdown.

Expected behavior Should have a window.bootsrap declaration or something similar. The whole issue is caused when importing bootstrap js twice.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 103.0

[tabuna]

Hi @HichemBenali I've added Bootstrap's global variable import and it's already available in new releases. Can you tell me if this solves your problem?https://github.com/orchidsoftware/platform/blob/15bd88dcd688f8c69a22d568ea09452a42b56f14/resources/js/app.js#L9

[Gribanov]

Seems I had similar problem. Code before:

//somewhere in controller
import {Modal} from "bootstrap";
export default class extends PictureController {
...
  someMethod(){
...
    let loadMediaModal = Modal.getOrCreateInstance(dropname.querySelector(`.media.modal`));
...
  }
...
}

When running npx mix it included the whole bootstrap and broke modals. So solutions is

//somewhere in controller
//get rid of Bootstrap import
//import {Modal} from "bootstrap";
export default class extends PictureController {
...
  someMethod(){
...
    let loadMediaModal = Bootstrap.Modal.getOrCreateInstance(dropname.querySelector(`.media.modal`));
...
  }
...
}

@tabuna thank you for fix. By the way, maybe include a line in documentation (javascript.md) that to build controller you need to run npx mix?

[HichemBenali]

@tabuna Yes that works