Get/import bootstrap.js from Webpack bundle.js

Question

Sorry i not have experience with webpack.

I have a template page generated with Webpack.

The page show modal dialog with bootstrap.js

The bootstrap.js included in bundle.js

I need show/hide/listen event of modal windows but i can not use $('#dialog').modal('hide') because bootstrap not loaded (in current context?)

How i can import/get access to bootstrap.js in bundle.js?

Examples - try to close modal with button "Close with JS"

Error

$(...).modal is not a function

Error

not removed modal-backdrop fade

Importing settings

How did you include bootstrap into your project? You can simple `import 'bootstrap';` at `index.js` or `app.js`. — Slava Utesinov, Jan 14 '19 at 07:13
@SlavaUtesinov https://codepen.io/AlexandrM/pen/QzJqgz without including bootsrap.js https://codepen.io/AlexandrM/pen/xmQXYE with including bootsrap.js — Alexandr Sulimov, Jan 14 '19 at 08:09
@MM Yes, samples in question. https://codepen.io/AlexandrM/pen/QzJqgz without including bootsrap.js https://codepen.io/AlexandrM/pen/xmQXYE with including bootsrap.js — Alexandr Sulimov, Jan 16 '19 at 09:00
@AlexandrSulimov I had seen the codepen samples. By html/js code, I meant the complete code, including the part where you have imported bootstrap whether through downloading the library or through cdn. I could not find any mention of bootstrap in the codepen links. Pardon me but I am not sure on how codepen imports work. — M M, Jan 16 '19 at 13:18
@M M In codepen is minimal project with bug. I have add a screen shot where is visible importing. There are to links/projects 1) not used external bootsrap.js (i can not hide modal by .modal('hide') 2) used external bootsrap.js (modal not closed fully, "backdrop" not hide) — Alexandr Sulimov, Jan 16 '19 at 13:25

Seyhmus Gokcen · Accepted Answer · 2019-01-17T15:15:37.703

1

I just inspect your codepen example and somehow 2 modal-backdrop generated on the two of your example. (with or without bootstrap)

and one of them remain on the page when the other one closed.

I just check if there is some bug or anything else on the bootsrap and face with closed issue on the github;

Somehow, some of the people face with your problem too and caused by many issue.

You may delete the second backdrop manually on the your with bootstrap example for the short cut solution.

Update:

After the Alexandr Sulimov's feedback, I just re-search it again and find that a topic on stackoverflow with the similar issue;

I test it on the with bootstrap codepen example and works very well

$("[data-dismiss=modal]").trigger({ type: "click" });

@Alexandr, can you try your code as below that as I understand just mimic the close with TAG;

$(function(){
   $('#closeWithJS').on('click', function(){
       $("[data-dismiss=modal]").trigger({ type: "click" });
   });
});

edited Jan 17 '19 at 15:15

answered Jan 16 '19 at 15:07

Seyhmus Gokcen

When i have removed second backdrop - modal dialog not shown by button "Open modal for @mdo" https://clip2net.com/s/3Zd6xT8 – Alexandr Sulimov Jan 17 '19 at 10:11
@AlexandrSulimov I update my answer upon your feedback – Seyhmus Gokcen Jan 17 '19 at 15:14
Thanks, yes it solution is works. If will not answers in 2 day i mark you answer as answer with bounty. I seek an answer to a question "How i can import/get access to bootstrap.js in bundle.js?" because i want use a usual code ".modal('hide')" and one instance of bootstrap.js – Alexandr Sulimov Jan 18 '19 at 06:49
Let me know, did you add your bootstrap.js script file in the index.html's header manually? If yes, you may guide : https://getbootstrap.com/docs/4.0/getting-started/webpack/ – Seyhmus Gokcen Jan 18 '19 at 08:29
Or this might helps to you; https://medium.com/commencis/how-to-import-bootstrap-using-webpack-7245eba98056 – Seyhmus Gokcen Jan 18 '19 at 08:36
I have a bundle.js (are includes a bootsrap.js compiled/minified with webpack) + html page. I need run code $('#M').modal('hide') (in – Alexandr Sulimov Jan 18 '19 at 13:07
From the official bootstrap 's docs; Bootstrap is dependent on jQuery and Popper, these are defined as peerDependencies, this means that you will have to make sure to add both of them to your package.json. Are these two files included in to your project too? – Seyhmus Gokcen Jan 18 '19 at 13:36

1 Answers1