'How to import and use specific BootStrap 5 JavaScript Plugins?

I am new to Bootstrap (v5.1.0) and gulp and do not completely understand how I can import only specific Bootstrap JavaScript plugins. I have tried this by just using Bootstraps modal plugin, but I either get an error message in the browser console (SyntaxError in the import statement) nothing happens when clicking the modal launch button.

My index.html with the modal example from Bootsrap 5 docu

<head>
  ...
  <script src="main.js" async></script>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>
</body>

My idea was now to simply import the necessary JS plugins (located at js/src/ in the bootstrap package) at the top of my main.js file:

(async function main() {
  import BaseComponent from 'bootstrap/base-component.js'
  import Modal from 'bootstrap/modal.js'
  const {myConfig} = await import("./myconfig.js");
  ...
})();

Alternatively I tried to import them this way:

import { BaseComponent } from 'bootstrap/base-component'
import { Modal } from 'bootstrap/modal'

(async function main() {
  const {myConfig} = await import("./myconfig.js");
  ...
})();

Could somebody please explain how to selectively import Bootstrap's JS plugins, or what best practices are when working with Bootstraps JS plugins? At the moment I am compiling my website's source files with gulp - just in case this matters.

Solution 1:^[1]

I am not sure if this is the final main.js as well as HTML code that you are shipping to the browser. I hope you are aware that import statements written like this need to be resolved during compile time using Babel, task runners like gulp and/or module bundlers like webpack. Otherwise the browser would throw such errors. During the compilation, the import statements would get replaced by the imported code and I don't see why an import syntax would escape into the browser. You can have imports in JS to run within browser but the syntax would be different and more importantly it would impact performance.

If however the Syntax error in Import is being reported early in the build process, it could possibly be an indication of issues with the absence or version of Babel.js which is supposed to interpret and reconcile the differences in ES versions. Maybe the JS syntax validation on your task runner setup may not up to date.

I use Webpack 4 (with Babel) and was successfully able to test this exact scenario. Everything else seems to be correct in your code. (like importing the base-component and modal in your main.js).

Noticed another thing(not related to the issue you reported). You use

<script .. async>..

This would download the script in parallel and run it as soon as its available. This means it could very well run before the page is completely parsed (or before its DOM tree is ready). If you intend to do DOM operation, you should be using defer instead of async. Alternatively, you could just add the script to the bottom of the HTML body.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	supi

'How to import and use specific BootStrap 5 JavaScript Plugins?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]